Im doing a random image display as part of a lab and I cant get the third image to appear (scissors.png). Thats my javascript below..Help would be much appreciated!
var total = 0;
function Images(){
var img1 = document.getElementById('img1');
var x = Math.floor(Math.random()*2)+1;
/* Player one */
if (x ==1)
img1.src = 'rock.png';
else if (x==2)
img1.src = 'paper.png';
else if (x==3)
img1.src = 'scissors.png';
}
I'm doing a random image display as part of a lab and I can't get the third image to appear (scissors.png).
That's because you're multiplying your random number by 2, and then flooring it, which gives you a range of 0-2 (inclusive); which isn't a problem (given zero-based arrays) but your ifis expecting one-based array indexes.
Incidentally, I'd suggest:
var images = ['rock', 'paper', 'scissors'],
rand = Math.floor(Math.random() * images.length);
return images[rand] + '.png';
Leading to an implementation like so:
function getImage() {
var images = ['rock', 'paper', 'scissors'],
rand = Math.floor(Math.random() * images.length);
return images[rand] + '.png';
}
document.querySelector('button').addEventListener('click', function() {
console.log(getImage());
});<button>Get an image</button>Try this:
var x = Math.floor(Math.random()*3)+1;
I'd also suggest you use: if (x === 1).
===, for what? can Math.floor return not int?
Javascript Math.random() returns a float value between the range [0, 1) - meaning including 0 but up to 1 excluding 1.
So, the max value is 0.99 * 2 = 1.98 and incremented by 1 is 2.98. Floor value of that is 2.
Easiest solution would be just to multiply it by 3.
Math.random() ∈ [0,1)
⇒ Math.random() * 2 ∈ [0,2)
⇒ Math.floor(Math.random()*2) ∈ [0,1] ∩ ℤ = {0,1}
⇒ Math.floor(Math.random()*2) + 1 ∈ {1,2}
If you want a number of the set {1,2,3}, you should multiply by 3:
Math.random() ∈ [0,1)
⇒ Math.random() * 3 ∈ [0,3)
⇒ Math.floor(Math.random()*3) ∈ [0,2] ∩ ℤ = {0,1,2}
⇒ Math.floor(Math.random()*3) + 1 ∈ {1,2,3}
function Images(){
var rand = Math.floor(Math.random()*3), // pick a random number: 0, 1 or 2
results = [rock, paper, scissors]; // Array of names, ordered.
// pick the right index from the array, so if the random number was '1',
// so the value at that index is used, which is "paper".
document.getElementById('img1').src = results[rand] + '.png';
}
random is not going to ever return 3)Just change your multiplier to 3.
Or even to variable, that equals number of possibility results.
Math.random return us 0 <= r < 1.
Then multiplying, we can to get 0 <= r*n < n float numbers.
Math.floor get us integers 0 <= k < n or, that equals 0 <= k <= n-1
You should to add 1 to this sequence, if you want to get [1, n],
but [0, n-1] is the best for array index with length n.
Here example of implementation:
function action(images){
document.getElementById('img1').src =
images[Math.floor(Math.random()*images.length)];
}
action([
'rock.png',
'scissors.png',
'paper.png',
'lizard.gif',
'Spok.jpg'
]);
Here is my code, what's wrong? are useful for future readers. But you are right, yes.