So I am developing a dice program in JavaScript where, when run, if the current die is on 1, it should go to 2. If the die is currently 2 it should go to 3 and so on. At the end of the process, when the die is on 6, it should loop back and go to 1.
However, when it's on 6 and adds 1, it shows 7 which is not there and it shows an error.
Here is my code
var rand = "";
var dice = document.getElementById("dice");
rand = Math.floor(Math.random()*6)+1;
//console.log(rand);
//
var y = 1;
var Totaler = (y+rand);
console.log(Totaler);
var My_Array = [1,2,3,4,5,6];
var link = "https://www.paulneve.com/pp/dice1.png";
var letters = link.slice(-5,33);
dice.src = "https://www.paulneve.com/pp/dice"+My_Array[Totaler]+".png";
<!-- Image1:"https://www.paulneve.com/pp/dice1.png"-->
<!-- Image2:"https://www.paulneve.com/pp/dice2.png"-->
<!-- Image3:"https://www.paulneve.com/pp/dice3.png"-->
<!-- Image4:"https://www.paulneve.com/pp/dice4.png"-->
<!-- Image5:"https://www.paulneve.com/pp/dice5.png"-->
<!-- Image6:"https://www.paulneve.com/pp/dice6.png"-->
<div>You've rolled</div>
<img id="dice" src="https://www.paulneve.com/pp/dice1.png" />
The problem is that you are adding 1 to your random number twice. I've also simplified the code by removing the lookup array, as that's a bit redundant.
var rand = Math.floor(Math.random()*6)+1;
var dice = document.getElementById("dice");
dice.src = "https://www.paulneve.com/pp/dice"+rand+".png";
<!-- Image1:"https://www.paulneve.com/pp/dice1.png"-->
<!-- Image2:"https://www.paulneve.com/pp/dice2.png"-->
<!-- Image3:"https://www.paulneve.com/pp/dice3.png"-->
<!-- Image4:"https://www.paulneve.com/pp/dice4.png"-->
<!-- Image5:"https://www.paulneve.com/pp/dice5.png"-->
<!-- Image6:"https://www.paulneve.com/pp/dice6.png"-->
<div>You've rolled</div>
<img id="dice" src="https://www.paulneve.com/pp/dice1.png" />
Arrays start at 0. So to get the 6th die from your array you need My_Array[5]. To get the 1st die you need My_Array[0]. You need to change your code to only select from 0 to 5:
rand = Math.floor(Math.random()*6);
Also stop adding y+rand and change to:
var Totaler = rand;
That way when you select My_Array[Totaler] it will give you 6 if Totaler = 5. You don't really need My_Array though, you can just use rand+1.
Related
This question already has answers here:
Getting a random value from a JavaScript array
(28 answers)
Closed 5 years ago.
So im creating an app that helps you decide on a movie to watch. one of the functions on the app is a randomizer button which randomly displays a movie based on the genre you selected but not sure how to display the image. heres what i have so far. Thank you!
<body>
<button id='randomBut'>RANDOMIZE</button>
<div id='movieImg'><img src='movie1.svg'></div>
</body
<script>
var randomizer = document.getElementById("randomBut");
var randimg = document.getElementById("movieImg");
var movieimages = ["movie1.svg", "movie2.svg", "movie3.svg"];
document.getElementById("movieImg").innerHTML = movieimages;
randomizer.addEventListener("click", function(){
var randimg = document.createElement("img");
randimg.src = "movieimages" ;
</script>
put the id on the image and then create a random number generator. use that random number and choose the image from the array and assign it to the image src
<button id='randomBut'>RANDOMIZE</button>
<div><img id='movieImg' src='http://placehold.it/100x100'></div>
<script>
var randomizer = document.getElementById("randomBut");
var randimg = document.getElementById("movieImg");
var movieimages = ["http://placehold.it/100x100", "http://placehold.it/150x100", "http://placehold.it/100x150"];
randomizer.addEventListener("click", function(){
var randNum = Math.floor(Math.random() * movieimages.length) + 0
randimg.src = movieimages[randNum] ;
});
</script>
I have a simple math problem in javascript that I can't solve.
var prodajna_avg = parseFloat(vpc - (vpc * (rab_avg / 100))).toFixed(2);
var nabavna = parseFloat(<?php echo "$nabavna_cijena"; ?>);
document.getElementById("brutto_avg").textContent = parseFloat(prodajna_avg - nabavna);
Problem is in line three. I don't get the correct amount and I don't know why. In first row amount is 5.624,17 and second row is 3.904,54. Third row is returning 5.620,19 for some reason, while it should be 1.719,63.
Can you help me? I'm learning javascript that's why it's a problem for me.
Thanks.
Make sure that $nabavna_cijena is correctly formatted.
var nabavna = parseFloat("3.904,54"); // --> nabavna == 3.904
var nabavna = parseFloat("3,904.54"); // --> nabavna == 3
var nabavna = parseFloat("3904.54"); // --> nabavna == 3904.54
The function parseFloat() requires that the decimal point is . and it does not allow a group separator.
i'm new to programming, wanted to practice.
I wanted to make an html document with javascript embedded, the document will have two input fields in one field the user will type the sentence and in the second field she will type how many times she wanna print it, than when she click on the button the script will print that text in the "printhere" div.
i tried but failed, following is my code, can someone please tell me what i am messing ?
<html>
<body>
<!-- form started -->
<form>
<!-- what sentence to print -->
What to write?<br>
<input id="what"><br><br>
<!-- how many times to print -->
How many times ?<br>
<input id="howmany"><br><br>
<!-- the button -->
<button type="button" onclick="printItNow()">Print Now</button>
<form>
<!-- form ended -->
<!-- the div where the content will print -->
<div id="printhere">
</div>
<script>
function printItNow() {
var printhere = document.getElementById('printhere');
var whatto = document.getElementById('what');
var howmany = document.getElementById('howmany');
for (var i=0; i<howmany; i++) {
printhere.innerHTML += whatto;
}
}
</script>
</body>
<html>
thank you all. :)
you missed .value, in document.getElementById(), change:
var whatto = document.getElementById('what');
var howmany = document.getElementById('howmany');
to
var whatto = document.getElementById('what').value;
var howmany = document.getElementById('howmany').value;
Change
var whatto = document.getElementById('what');
to
var whatto = document.getElementById('what').value;
var howmany = document.getElementById('howmany');
to
var howmany = document.getElementById('howmany').value;
and
printhere.innerHTML += whatto;
to
printhere.innerHTML += whatto+"<br>";
the third change is not must technically , but it will put every sentence on its own line.
I know there are already a few questions like this, but I just can't seem to apply any of the answers (this is my first time making anything like this at all). I currently have a page that, when a button is pushed, a random image appears (thanks to some of the great posts on here, this is actually working). My issue is, the random number has a lot of repeats prior all the images being seen. I am wanting to make it where all images are seen (in a random order) before any duplicates. This is what is in the body:
<form name="imageForm">
<table border=3>
<tr align="center">
<td>
<input onclick="displayImage();" type=button value="Click Here">
</td>
</tr>
<tr>
<td>
<img src="blank.jpg" name="canvas" />
</td>
</tr>
</table>
</form>
Here is the script:
<script language="javascript">
var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];
function displayImage(){
var num = Math.floor(Math.random() * (imagesArray.length));
document.canvas.src = imagesArray[num];
}
</script>
From what I have read, the way to do this would be to add a spice, and have shown images dropped into a new array, then once the original array equals 0, then have it reset. Try as I might, I have not been able to successfully integrate that into my code :( . This is what I ended up with (which does nothing, and breaks the function entirely):
<script>
var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];
var shownImages = []
function displayImage(){
var num = Math.floor(Math.random() * (imagesArray.length));
document.canvas.src = imagesArray[num];
shownImages.unshift(imagesArray.splice(num,num+1));
if(images.length == 0){
images.Array = shownImages;
shownImages = [];
return shownImages[0];
}
</script>
Another method mentioned seemed to be to have a function that shuffled the images first, then displayed them in the shuffled order, then reshuffled and repeated, but I got even less far with that.
There also seems to be some question on whether the random number max should be imagesArray.length by itself, or +1 or -1. I am sure there are a number of other issues with this as well, but like I said, this is my first attempt. Any help is appreciated.
You should keep track of the numbers that you have generated, and if its a repeat then get a new number.
<script language="javascript">
var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];
var usedImages = {};
var usedImagesCount = 0;
function displayImage(){
var num = Math.floor(Math.random() * (imagesArray.length));
if (!usedImages[num]){
document.canvas.src = imagesArray[num];
usedImages[num] = true;
usedImagesCount++;
if (usedImagesCount === imagesArray.length){
usedImagesCount = 0;
usedImages = {};
}
} else {
displayImage();
}
}
</script>
I'm trying to create a simple javascript game for college and am having trouble getting what i want to display on screen.
my script is as follows:
var qArray = new Array();
qArray[0] = {image:"Images/q1.png"};
qArray[1] = {image:"Images/q2.png"};
qArray[2] = {image:"Images/q3.png"};
qArray[3] = {image:"Images/q4.png"};
qArray[4] = {image:"Images/q5.png"};
var count = 0;
var question = qArray.splice(count,1);
when i use this i get "undefined":
document.getElementById("question").innerHTML = question.image;
and when i use this i get nothing:
document.getElementById("question").src = question.image;
my html is just a simple div like so:
<div id = "question" align = "center">
</div>
i need to have the "count" variable because it increments to show the next image for the next question
if anyone could help that would be great
Here is a working Fiddle. qArray.splice() doesn't work because it actually removes that element from the array and returns a new array while you were just looking for a specific index in the array (not to mention you just deleted the element you were looking for)
This works. I used a random imgur image to show that it does indeed load.
<html><head></head><body>
<img src="" id="question"></img>
<script type="text/javascript">
var qArray = new Array();
qArray[0] = {image:"http://i.imgur.com/pGpmq.jpg"};
qArray[1] = {image:"Images/q2.png"};
qArray[2] = {image:"Images/q3.png"};
qArray[3] = {image:"Images/q4.png"};
qArray[4] = {image:"Images/q5.png"};
var count = 0;
var question = qArray[count];
document.getElementById('question').src = question.image;
</script>
</body>
</html>