无法更改 Javascript 中数字输入的默认值

Question

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 似乎是唯一使用的，即使我通过单击箭头将网站本身的输入更改为 10。

我认为就语法而言我已经正确编写了代码，所以我唯一的想法是输入可能必须以某种形式包装，并且“滚动”按钮更改为 type="submit"？

这是一个带有损坏代码的代码笔的链接，以及下面涉及的部分片段。

 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>

Answer 1

首先，你应该在 for 循环中调用你的 Math.random() ，否则你只会随机生成一个数字，而你所有的骰子都会有相同的数字。 其次，您应该在 function 中分配numDice ，以便它重新检查并分配当前值，而不是在页面渲染开始时分配：

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();
}