Cannot change default value of number input in Javascript-CodePudding

I am using Javascript (not familiar with frameworks like Angular just yet), and trying to get and display the value of a number input from my HTML, but when I run the function that does this, the default value of "1" from the HTML seems to be the only one used, even if I change the input on the website itself to, say, 10 by clicking the arrows.

I think I've written the code correctly as far as syntax goes, so my only thought is that perhaps the input has to be wrapped in a form of some kind, and the "roll" button changed to type="submit"?

Here is a link to a codepen with the broken code, and some snippets of the involved pieces below.

var displayScreen = document.getElementById("display-message");
var rollButton = document.getElementById("roll-button");

//Variable to tell the rollDice() function how many times to roll dice.
var numDice = document.getElementById("num-dice").value;

//Dice Array to hold the results of the rollDice() function, gets cleared after each use.
var diceTotal = [];

//Event listener for the "roll" button
rollButton.addEventListener("click", rollDice);

//Make this function display a roll result
function displayMessage() {

  displayScreen.innerText = diceTotal[0];
}

//Generate a random number between 1 and diceType, and set the rolledNumber variable to its result
function rollDice() {

  //Nothing currently changes numDice, so it keeps default value="1".

  result = 0;
  var roll = Math.floor(Math.random() * diceType)   1;

  for (var i = 0; i < numDice; i  ) {
    result  = roll;
  }

  diceTotal[0] = result;

  displayMessage();
}

<div id="dice-display-div">

  <!--
                We want to display the dice roll total, any applied bonuses, and then the final total
                together in this div, possibly as separate <h2> elements.
            -->

  <h2 id="display-message">Click "Roll" to Begin</h2>

</div>

<div id="roll-button-div">

  <label class="roll-button-label" for="num-dice" id="num-dice-label">Number of Dice: </label>
  <input class="roll-button-item" type="number" id="num-dice" name="num-dice" value="1" min="1" max="10">

  <label class="roll-button-label" for="bonus" id="bonus-label">Bonus (or Negative): </label>
  <input class="roll-button-item" type="number" id="bonus" name="bonus" value="0" min="-10" max="10">

  <button class="roll-button-item" id="roll-button">Roll</button>

</div>

CodePudding user response：

First, you should call your Math.random() inside the for loop, otherwise you will only randomly generate one number, and all your dice will have that same number. Second, you should assign numDice inside your function so it rechecks and assigns the current value instead of at the start of page render:

var displayScreen = document.getElementById("display-message");
var rollButton = document.getElementById("roll-button");



//Dice Array to hold the results of the rollDice() function, gets cleared after each use.
var diceTotal = [];

//Event listener for the "roll" button
rollButton.addEventListener("click", rollDice);

//Make this function display a roll result
function displayMessage() {

    displayScreen.innerText = diceTotal[0];
}

//Generate a random number between 1 and diceType, and set the rolledNumber variable to its result
function rollDice() {
   //Variable to tell the rollDice() function how many times to roll dice.
   var numDice = document.getElementById("num-dice").value; //assign this upon function call so it checks it each time the button is clicked to get the latest value
   //Nothing currently changes numDice, so it keeps default value="1".

   result = 0;
   var roll = 0

   for (var i = 0; i < numDice; i  ) {
       roll =  Math.floor(Math.random() * diceType)   1; //call random on each dice roll
       result  = roll;
   }

   diceTotal[0] = result;

  displayMessage();
}