Javascript Roll the Dice

#1

Hello! I am learning javascript and now I am making mini challenges. When I see a code I can interpret what is being done. Mostly where I am having problems is just sitting down and making my code. So, I am making a Roll the Dice. I have seen different ways people have done theirs. I am trying to make my own. I am still at the beginning and having problems with my code. I know it seems very obvious maybe to you, I just cannot see what I am doing wrong. Eventually it should have images of the dice. Any insight will be greatly appreciated! Here is where I am stuck right now:

let roll1;
let roll2;

const rollDice = function(){

roll1 = parseInt(Math.random() * 6) + 1;
roll2 = parseInt(Math.random() * 6) + 1;

if(roll1===1){
return dice1;
} else if(roll1===2){
return dice2;
} else if(roll1===3){
return dice3;
} else if(roll1===4){
return dice4;
} else if(roll1===5){
return dice5;
} else(roll1===6){
return dice6;
}
console.log(roll1);
}
rollDice();

#2

What are the six diceX variables supposed to represent and where are they defined?

To save on repeated code patterns, write a helper function.

const rollDie = () => Math.floor(Math.random() * 6 + 1);

const rollDice = () => `<img src="image${rollDie()}"><img src="image${rollDie()}">`;
#3

I had them in the HTML but, it was not what I wanted. I searched on the web to see if the image of the dice could be inserted in the javascript. Since I only want to output the image of the dice returned from the Math.random equation I figured this would be better for what I want. So, this is kind of where I am at now.

Oh, and Hi there again. You helped me before. Hopefully in time I will be able to do the same for someone. I appreciate it alot!

That would be the next step, shortening the code and adding the image. Once I figure out why this is not printing.

#4

If you are in the HTML interface then you have clickable objects.

<section>
  <div id="dice"></div>
  <button>Roll!</button>
</section>

const dice = document.querySelector('#dice');
const roll = document.querySelector('button');
const rollDie = () => Math.floor(Math.random() * 6 + 1);
const rollDice = () => `<img src="dice${rollDie()}.png">
                        <img src="dice${rollDie()}.png">`;
roll.onclick = () => dice.innerHTML = rollDice();