CODEWITHSUNDEEP
javascripthtml
Aaron Thole
Aaron Thole

Reputation: 17

How to show input from a function

I'm creating a game that has the user select how many dice they want to roll from a list box, after the user put in their input that number of dice will appear. The user then can click the button to roll the dice and it will roll the number of dice they have selected. I want to then put the numbers below that to show how many times each number is rolled, then reset if the user rolls again. Currently I am getting null and undefined where I want the numbers to be shown. How do I fix that.

function GetQty() {
  var val = document.getElementById("myList").value;
  SetUpDice(val);
}
SetUpDice(val);

function SetUpDice(Val) {
  let dices = document.getElementById("dices");
  dices.innerHTML = "";
  //Loop to show questionDie
  for (i = 1; i <= Val; i++) {
    let img = document.createElement('img');
    img.src = "dieImages/question-mark-dice.jpg", img.id = "dieImg" + i, onclick = "rollAlldice()";
    dices.appendChild(img);
  }
  rollAlldice(Val);
}

function rollAlldice() {
  //roll all dice randomly
  for (var i = 1; i <= 5; i++) {
    var ran = Math.floor(6 * Math.random()) + 1;
    document.getElementById('dieImg' + i).setAttribute("src", "dieImages/die" + ran + ".jpg");
    if (ran == 1)
      countOne++;
    else if (ran == 2)
      countTwo++;
    else if (ran == 3)
      countThree++;
    else if (ran == 4)
      countFour++;
    else if (ran == 5)
      countFive++;
    else if (ran == 6)
      countSix++;
  }
  document.getElementById("display").innerHTML = countOne + "," + countTwo + "," + countThree + "," + countFour + "," + countFive;
}
var countOne = 0;
var countTwo = 0;
var countThree = 0;
var countFour = 0;
var countFive = 0;
var countSix = 0;
body {
  text-align: center;
}

img {
  height: 150px;
}

.document {
  text-size-adjust: 50px;
}
<body>
  <p>
    <label># of dice: </label>
    <select id="myList">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <!-- <option value = "6">6</option> -->
    </select>
    <button type="button" onclick="GetQty()">Roll dice!</button>
    <div id="dices"></div>
  </p>
  <hr>
  <p id="display">--</p>
</body>

Upvotes: 0

Views: 45

Answers (1)

Bryan Dellinger
Bryan Dellinger

Reputation: 5304

did you read the errors? you are attempting to use things before they are defined.

var countOne = 0;
var countTwo = 0;
var countThree = 0;
var countFour = 0;
var countFive = 0;
var countSix = 0;
var val = 0;

function GetQty() {
 val = document.getElementById("myList").value;
  SetUpDice(val);
}
SetUpDice(val);

function SetUpDice(Val) {
  let dices = document.getElementById("dices");
  dices.innerHTML = "";
  //Loop to show questionDie
  for (i = 1; i <= Val; i++) {
    let img = document.createElement('img');
    img.src = "dieImages/question-mark-dice.jpg", img.id = "dieImg" + i, onclick = "rollAlldice()";
    dices.appendChild(img);
  }
  rollAlldice(Val);
}

function rollAlldice() {
  //roll all dice randomly
  for (var i = 1; i <= 5; i++) {
    var ran = Math.floor(6 * Math.random()) + 1;
    const el =  document.getElementById('dieImg' + i);
    if(el){
       el.setAttribute("src", "dieImages/die" + ran + ".jpg");
    }

    if (ran == 1)
      countOne++;
    else if (ran == 2)
      countTwo++;
    else if (ran == 3)
      countThree++;
    else if (ran == 4)
      countFour++;
    else if (ran == 5)
      countFive++;
    else if (ran == 6)
      countSix++;
  }
  document.getElementById("display").innerHTML = countOne + "," + countTwo + "," + countThree + "," + countFour + "," + countFive;
}
body {
  text-align: center;
}

img {
  height: 150px;
}

.document {
  text-size-adjust: 50px;
}
<body>
  <p>
    <label># of dice: </label>
    <select id="myList">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <!-- <option value = "6">6</option> -->
    </select>
    <button type="button" onclick="GetQty()">Roll dice!</button>
    <div id="dices"></div>
  </p>
  <hr>
  <p id="display">--</p>
</body>

Upvotes: 2

Related Questions