Javascript: why does the image not change in the HTML file-CodePudding

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" />

CodePudding user response：

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" />

CodePudding user response：

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.