Making a multiple random dice roller that shows a picture of the dice. Why doesn't my code work?

user_12217685 0
Viewed 655

Trying to make it roll multiple dice and show pictures of dice

function rollDice() {
  var numDice = document.getElementById("diceNum").value;
  var container = document.getElementById("dieContainer");

  container.innerHTML = "";

  for (var i = 0; i < numDice; i++) {
    var diceRoll = Math.floor(Math.random() * 6) + 1;
    container.innerHTML += '<div class="dice">' + diceRoll + '</div>';
  };
};
<h4>Choose number of dice to roll</h4>
<input id="diceNum" type="text" value="3">
<button onclick="rollDice()">Roll Dice</button>
<div id="dieContainer" class="dice"></div>

Basically right now I can select how a number of random numbers I want to generate from 1-6 But I want it to have pictures assigned. I don't know much and have tried adding varibles but i'm having no luck.

dice image html javascript
3 Answers

Make sure you have proper css classes defined for your dice

and use numbers for specific dice classes

e.g.:

'<div class="dice _'+diceRoll +'">' + diceRoll + '</div>'

then use the following css classes:

.dice._6 {
background-image: url();
}

.dice._5 {
background-image: url();
}

etc..

user_95543500

Create an array of 6 paths which point to images. Then using diceRoll-1, you can get the picture of the dice for a particular face (here I've used images of standard numbers). Using the <img /> tag, you can display your image by setting its src to that from your array.

As a side note, don't modify the DOM multiple times, as this is an expensive operatation. Instead, make a string, and build that up to include the HTML you want to display. Then, when your for loop is complete, set the innerHTML

See example below:

function rollDice() {
  var numDice = document.getElementById("diceNum").value;
  var container = document.getElementById("dieContainer");

  container.innerHTML = "";
  
  var images = [
    "https://svgsilh.com/svg_v2/2136425.svg",
    "https://svgsilh.com/svg_v2/2052150.svg",
    "https://svgsilh.com/svg_v2/2052130.svg",
    "https://svgsilh.com/svg_v2/2052105.svg",
    "https://svgsilh.com/svg_v2/2052086.svg",
    "http://pngimg.com/uploads/number6/number6_PNG18557.png"
  ];
  
  var html = "";
  for (var i = 0; i < numDice; i++) {
    var diceRoll = Math.floor(Math.random() * 6) + 1;
    html += 
      '<div class="dice">' + diceRoll + '<img src="'+ images[diceRoll-1] +'" alt="Number ' +diceRoll +'"/></div>';
  };
  container.innerHTML = html;
};
img {
  display: inline;
  height: 100px;
  width: 100px;
}
<h4>Choose number of dice to roll</h4>
<input id="diceNum" type="text" value="3">
<button onclick="rollDice()">Roll Dice</button>
<div id="dieContainer" class="dice"></div>

user_56489540

Your code works fine, as you say. The only thing missing is adding images to the output, rather than just plain text. If you have 6 dice images (eg. dice1.jpg - dice6.jpg) then you could do something like this...

container.innerHTML += '<div class="dice"><img src="dice' + diceRoll + '.jpg"/></div>'

That's the only thing wrong with your code - you just need to add the images.

user_10236180
Related