Javascript utilizing array won't work - javascript

I am trying to achieve an effect where one of the 6 text options appear randomly on load/refresh.
<html>
<body>
<script>
var myQuotes = new Array();
myQuotes[0] = "text option 1";
myQuotes[1] = "text option 2";
myQuotes[2] = "text option 3";
myQuotes[3] = "text option 4";
myQuotes[4] = "text option 5";
myQuotes[5] = "text option 6";
var myRandom = Math.floor(Math.random()*myQuotes.length);
$('#myQuote').html(myQuote[myRandom]);
</script>
</body>
</html>
I tried borrowing code from here: https://forum.jquery.com/topic/how-can-i-show-a-different-quote-at-random-on-page-refresh

$('#myQuote').html(myQuote[myRandom]);
change to
$('#myQuote').html(myQuotes[myRandom]);
The script should put at the end of body for the ready of myQuote. And I suggest you to use the debug module of your browser. You will find things went wrong when the code execute at the last line.

There are two potential problems.
First, your myRandom variable may exceed the maximum index (5) of your myQuotes array. The length of myQuotes == 6; therefore, your formula below will return a value between 0 and 6 which will lead to an out of bounds error.
var myRandom = Math.floor(Math.random() * myQuotes.length);
Instead, use myQuotes.length - 1 like so (of course this assumes that your array is greater than zero, so do some length checking):
var myRandom = Math.floor(Math.random() * (myQuotes.length - 1));
Second, as pointed out by others, you are referring to a myQuote variable instead of myQuotes.
// You have:
$('#myQuote').html(myQuote[myRandom]);
// How about:
$('#myQuote').html(myQuotes[myRandom]);

Related

Randomly choosing text with Javascript and displaying it

I'm having one of those days where I can't put into words what I'm trying to find. So, forgive me if this question has been asked before, if it has, I simply cannot find it.
If I have ten different lots of text, how can I randomly select one of them with Javascript, and display it.
The closest I've got is this:
var textArray = [
'Hello Fred',
'Hello Jimmy',
'Hello Terry'
];
var randomNumber = Math.floor(Math.random() * textArray.length);
audioElement.setAttribute('src', textArray[randomNumber]);
<p id="text-here">This is where I want the text to go</p>
I'm pretty sure this isn't close to what I need though.
I've tested it and it works just fine. Just enclose your array string values in double quotes and everything will work as you expected.
Here it is just setting the innerHTML value of p tag which is selected by id randomNumber and then set it with random text value of your array.
getElementById: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
innerHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
var textArray = [
"Hello I'm Fred1",
"Hello I'm Jimmy1",
"Hello I'm Terry1",
"Hello I'm Fred2",
"Hello I'm Jimmy2",
"Hello I'm Terry2",
"Hello I'm Fred3",
"Hello I'm Jimmy3",
"Hello I'm Terry3"
];
var randomNumber = Math.floor(Math.random() * textArray.length);
document.getElementById("randomNumber").innerHTML = textArray[randomNumber];
<p id="randomNumber"> </p>
Create a function to create random number
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
Call the function to get a random number which will act as the array index
var index = getRandomInt(9)
Now considering you have array as 'textArray' then you can write
var text = textArray[index]
Now to update the value in paragraph
document.getElementById("text-here").innerHTML=text;

javascript, getting a random number result in each singular array

I'm not sure how to word the question and i'm still quite new at javascript.
So I've got a random quote generator that has each quote result as an array. I'd like to add in two items in the array which I've got so far but having one result be a random number generated eg "2 quote" but having 2 be randomised each time. The end result is for a browser based text game. So it could be "2 zombies attack" or "7 zombies attack." The code I have so far is:
var quotes = [
[x, 'Zombies attack!'],
[x, 'other creatures attack'],
['next line'],
]
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quote').innerHTML = quotes[randomNumber];
}
Ideally need x(or i however it's going to work) to be the result of a random number between a set range, each differently each array.
Thank you
p.s I forgot to mention that not all the quotes require a number. Thats why I've done it as a double array.
If I understand your goal correctly, you want to have a set of similar-ish message templates, pick one of them at some point and fill it with data, correct? There's a lot of ways to tackle this problem, depending on how varying can your templates be. For a simple case in my head where you just need to prepend a number to a string I'd do something like this:
var messages = [" zombies attack",
" other creatures attack"], // define your messages
messageIndex = Math.floor(Math.random() * messages.length), // pick one of them
numberOfMonsters = Math.floor(Math.random() * 10 + 1), // get your random number
result = numberOfMonsters + messages[messageIndex]; // construct a resulting message
document.getElementById('quote').textContent = result;
If you'd rather have more complex strings where you don't necessarily add a number (or any string) to the beginning, like ["There's X things in the distance", "X things are somewhere close"], then I'd recommend to either come up with some sort of string formatting of your own or use a library to do that for you. sprintf.js seems to be just right for that, it will let you do things like this:
var messages = ["%d zombies attack",
"A boss with %d minions attacks"], // define your messages
messageIndex = Math.floor(Math.random() * messages.length), // pick one of them
numberOfMonsters = Math.floor(Math.random() * 10 + 1), // get your random number
result = sprintf(messages[messageIndex], numberOfMonsters) // format a final message
document.getElementById('quote').textContent = result;
EDIT: Your task is much more complex than what is described in the original question. You need to think about you code and data organization. You have to outline what is finite and can be enumerated (types of actions are finite: you can loot, fight, move, etc.), and what is arbitrary and dynamic (list of monsters and loot table are arbitrary, you have no idea what type and amount of monsters game designers will come up with). After you've defined your structure you can come up with some quick and dirty message composer, which takes arbitrary entities and puts them into finite amount of contexts, or something. Again, I'm sort of shooting in the dark here, but here's an updated version of the code on plunkr.
I solved it to do what I want and still have the numbers different. The issue was I should have had the number generator within the quote function. Also can create multiple variables to use too for different number generators. The plan is to then integrate it with php to add content dynamically. Which I can do. Thanks Dmitry for guiding me in the right direction.
function newQuote() {
var MonsterOne = Math.floor((Math.random() * 14) + 0);
var MonsterTwo = Math.floor((Math.random() * 14) + 0);
var MonsterThree = Math.floor((Math.random() * 14) + 0);
var MonsterFour = Math.floor((Math.random() * 14) + 0);
var quotes = [
['Test', MonsterOne, 'One'],
['Test', MonsterOne,'Two'],
['Test', MonsterThree, 'Three'],
[MonsterFour, 'Four'],
['Five'],
]
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quote').innerHTML = quotes[randomNumber];
}

Variable Returning NaN Value - Cannot find out why

I am having to pickup from where someone in the business left off many years ago with an aging texting system.
It was built using ASP classic and sends a string to an API that then texts out, all this is neither here nor there. The problem i have is no JS experience, I am am a SQL Developer and did a little bit of ASP Classic (VBScript) years ago.
This piece of JScript picks up information from several form boxes and then places them in a string which is then passed to variable on a processing page to text out. The fields 'QValue, Indemnity and Excess' are all numeric. The Cover is text and it is replacing the cover text with 'NaN' now I understand this is for 'Not A Number' well that is exactly what it is, not a number but I want the text string.
Here is the snippet of code in question:
<script type="text/javascript">
function changeMessageText()
{
var messagetxt = document.getElementById('message').value
var QValue = document.getElementById('QValue').value
var Cover = document.getElementById('Cover').value
var Excess = document.getElementById('Excess').value
var Indem = document.getElementById('Indemnity').value
var messagetxt=messagetxt.replace("[QValue]", + QValue)
var messagetxt=messagetxt.replace("[Cover]", + Cover2)
var messagetxt=messagetxt.replace("[Excess]", + Excess)
var messagetxt=messagetxt.replace("[Indem]", + Indem)
document.getElementById('messageText').innerHTML = messagetxt;
}
</script>
Cheers.
When you do string.replace(searchvalue,newvalue), there is no need of + before the newValue
var messagetxt=messagetxt.replace("[QValue]", QValue)
//cover or cover2 whichever appropriate
var messagetxt=messagetxt.replace("[Cover]", Cover)
var messagetxt=messagetxt.replace("[Excess]", Excess)
var messagetxt=messagetxt.replace("[Indem]", Indem)
Is it normal that you use Cover2 in the replace where you read the input value and store it in the Cover variable ?
Those are two different variables and from the code you provided, we can only assume that Cover2 is initialized with NaN (which might not be the case, it can be copy/paste error).
Here is how you do it:
var messagetxt = document.getElementById('message').value;
var QValue = document.getElementById('QValue').value
var Cover = document.getElementById('Cover').value
var messagetxt=messagetxt.replace("[QValue]", QValue)
var messagetxt=messagetxt.replace("[Cover]", Cover)
document.getElementById('messagetxt').innerHTML = messagetxt;
Here is a working example of this: http://jsfiddle.net/F24cr/
Enjoy

Javascript: If-sentence logic, What am I doing wrong?

My current solution does not calculate the added ship cost. My condition isn't working, I've been able to do similar problems with functions but I would like to know where I went wrong here.
<html>
<script type="text/javascript">
var numOrdered = 0;
var priceItem = 0;
var shipCost = 0;
var amtDue = 0;
numOrdered = prompt("Enter the number ordered ",0);
priceItem = prompt("Enter the price of the item ",0);
amtDue = numOrdered * priceItem;
if (amtDue > 1000)
{
shipCost = 0;
}
else
{
shipCost = amtDue * .1;
}
amtDue = amtDue + shipCost;
document.write("You owe ", amtDue);
</script>
</html>
It works for me. I put your code here: http://jsfiddle.net/XVzKb/
No changes -- if I enter 5 and then when prompted again 10 the total displayed in the page is 55 which is 5 * 10 * 1.1 = 55. Note that if your input includes a non-numeric character like $ or , then you'll need to parse it like so:
number = parseInt(response.replace(/[^0-9]/g, ''), 10)
I would check out the developer tools in Chrome or Firefox and use console.log or put in some break points to help you understand what is working and what is not. This way you can see if its your javascript or your html document that is failing.
That being said, you are comparing strings not numbers, so you'll want to use parseInt on the values you are getting back from the prompt.
priceItem = parseInt(priceItem, 10);

generate random string for div id

I want to display YouTube videos on my website, but I need to be able to add a unique id for each video that's going to be shared by users. So I put this together, and I have run into a little problem. I am trying to get the JavaScript to add a random string for the div id, but it's not working, showing the string:
<script type='text/javascript' src='jwplayer.js'></script>
<script type='text/javascript'>
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (! length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var div = randomString(8);
</script>
<div id='div()'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('div()').setup({
'flashplayer': 'player.swf',
'file': 'http://www.youtube.com/watch?v=4AX0bi9GXXY',
'controlbar': 'bottom',
'width': '470',
'height': '320'
});
</script>
I really like this function:
function guidGenerator() {
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
From Create GUID / UUID in JavaScript?
2018 edit: I think this answer has some interesting info, but for any practical applications you should use Joe's answer instead.
A simple way to create a unique ID in JavaScript is to use the Date object:
var uniqid = Date.now();
That gives you the total milliseconds elapsed since January 1st 1970, which is a unique value every time you call that.
The problem with that value now is that you cannot use it as an element's ID, since in HTML, IDs need to start with an alphabetical character. There is also the problem that two users doing an action at the exact same time might result in the same ID. We could lessen the probability of that, and fix our alphabetical character problem, by appending a random letter before the numerical part of the ID.
var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
var uniqid = randLetter + Date.now();
This still has a chance, however slim, of colliding though. Your best bet for a unique id is to keep a running count, increment it every time, and do all that in a single place, ie, on the server.
Here is the reusable function to generate the random IDs :
function revisedRandId() {
return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
}
// It will not start with the any number digit so it will be supported by CSS3
I think some folks here haven't really focused on your particular question. It looks like the problem you have is in putting the random number in the page and hooking the player up to it. There are a number of ways to do that. The simplest is with a small change to your existing code like this to document.write() the result into the page. I wouldn't normally recommend document.write(), but since your code is already inline and what you were trying do already was to put the div inline, this is the simplest way to do that. At the point where you have the random number, you just use this to put it and the div into the page:
var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">This text will be replaced</div>');
and then, you refer to that in the jwplayer set up code like this:
jwplayer(randomId).setup({
And the whole block of code would look like this:
<script type='text/javascript' src='jwplayer.js'></script>
<script type='text/javascript'>
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz'.split('');
if (! length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">This text will be replaced</div>');
jwplayer(randomId).setup({
'flashplayer': 'player.swf',
'file': 'http://www.youtube.com/watch?v=4AX0bi9GXXY',
'controlbar': 'bottom',
'width': '470',
'height': '320'
});
</script>
Another way to do it
I might add here at the end that generating a truly random number just to create a unique div ID is way overkill. You don't need a random number. You just need an ID that won't otherwise exist in the page. Frameworks like YUI have such a function and all they do is have a global variable that gets incremented each time the function is called and then combine that with a unique base string. It can look something like this:
var generateID = (function() {
var globalIdCounter = 0;
return function(baseStr) {
return(baseStr + globalIdCounter++);
}
})();
And, then in practical use, you would do something like this:
var randomId = generateID("myMovieContainer"); // "myMovieContainer1"
document.write('<div id="' + randomId + '">This text will be replaced</div>');
jwplayer(randomId).setup({
i like this simple one:
function randstr(prefix)
{
return Math.random().toString(36).replace('0.',prefix || '');
}
since id should (though not must) start with a letter, i'd use it like this:
let div_id = randstr('youtube_div_');
some example values:
youtube_div_4vvbgs01076
youtube_div_1rofi36hslx
youtube_div_i62wtpptnpo
youtube_div_rl4fc05xahs
youtube_div_jb9bu85go7
youtube_div_etmk8u7a3r9
youtube_div_7jrzty7x4ft
youtube_div_f41t3hxrxy
youtube_div_8822fmp5sc8
youtube_div_bv3a3flv425
I also needed a random id, I went with using base64 encoding:
btoa(Math.random()).substring(0,12)
Pick however many characters you want, the result is usually at least 24 characters.
Based on HTML 4, the id should start from letter:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
So, one of the solutions could be (alphanumeric):
var length = 9;
var prefix = 'my-awesome-prefix-'; // To be 100% sure id starts with letter
// Convert it to base 36 (numbers + letters), and grab the first 9 characters
// after the decimal.
var id = prefix + Math.random().toString(36).substr(2, length);
Another solution - generate string with letters only:
var length = 9;
var id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, length);
Or you could use Cripto since it's already built in(except in IE11, I swear these guys havent updated in years!)
https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues#Examples
var id = new Uint32Array(10);
window.crypto.getRandomValues(id);
I also found this:
https://gist.github.com/6174/6062387#gistcomment-3255605
let length = 32;
let id = crypto.randomBytes(length).toString("base64");
There's a lot of ways to do this, but for most people, there's no reason to reinvent the wheel :)
A edited version of #jfriend000 version:
/**
* Generates a random string
*
* #param int length_
* #return string
*/
function randomString(length_) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz'.split('');
if (typeof length_ !== "number") {
length_ = Math.floor(Math.random() * chars.length_);
}
var str = '';
for (var i = 0; i < length_; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
For generating random ids, you can also use the standard crypto API with its randomUUID() function which is available in node.js (>=v16.7.0) and all relevant browsers except Safari:
const uuid = crypto.randomUUID()
console.log(uuid)
// prints e.g. "7f3f4512-fcf9-45fe-b726-512bba403426"
I would suggest that you start with some sort of placeholder, you may have this already, but its somewhere to append the div.
<div id="placeholder"></div>
Now, the idea is to dynamically create a new div, with your random id:
var rndId = randomString(8);
var div = document.createElement('div');
div.id = rndId
div.innerHTML = "Whatever you want the content of your div to be";
this can be apended to your placeholder as follows:
document.getElementById('placeholder').appendChild(div);
You can then use that in your jwplayer code:
jwplayer(rndId).setup(...);
Live example: http://jsfiddle.net/pNYZp/
Sidenote: Im pretty sure id's must start with an alpha character (ie, no numbers) - you might want to change your implementation of randomstring to enforce this rule. (ref)
May I an share an intuitive way to generate a randomID ?
const getRandomID = (length: number) => {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < length; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
Here is an easy one liner:
const generateUniqueID = (idLength) => [...Array(idLength).keys()].map((elem)=>Math.random().toString(36).substr(2, 1)).join("")
Where all you do is enter the idLength and it will return a unique id of that length.
generateUniqueID(23)
>>>'s3y9uebzuo73ih79g0s9p2q' // Id of length 23
First. Assign an id to your div. Like this:
<div id="uniqueid">This text will be replaced</div>
After that, add inside your <script> tag following code:
Document.getElementById("uniqueid").id = randomString(8);
window.btoa(String.fromCharCode(...window.crypto.getRandomValues(new Uint8Array(5))))
Using characters except ASCII letters, digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML5, an ID should start with a letter for compatibility.
function id(prefix = '', length = 7) {
let result = prefix;
for(let i = 0; i < length; i++) {
const random = Math.random();
result += String.fromCharCode(Math.floor(random * 26) + (random < .5 ? 65 : 97));
}
return result;
}
a random number between 0 and 25 is generated then added to either 65 or 97. When added to 65 it will give you an ascii code for a capital letter and when added to 97, an ascii code for a small letter.
Just use built-int crypto.randomUUID() which is supportted by all major browsers:
let uuid = crypto.randomUUID();
console.log(uuid);

Categories