無法更改Javascript中數字輸入的默認值

我正在使用 Javascript（還不熟悉像 Angular 這樣的框架），并試圖從我的 HTML 中獲取和顯示數字輸入的值，但是當我運行執行此操作的函式時，默認值“1”來自HTML 似乎是唯一使用的，即使我通過單擊箭頭將網站本身的輸入更改為 10。

我認為就語法而言我已經正確撰寫了代碼，所以我唯一的想法是輸入可能必須以某種形式包裝，并且“滾動”按鈕更改為 type="submit"？

這是帶有損壞代碼的codepen的鏈接，以及下面涉及的部分片段。

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>

uj5u.com熱心網友回復：

首先，你應該在 for 回圈中呼叫你的 Math.random() ，否則你只會隨機生成一個數字，你所有的骰子都會有相同的數字。其次，您應該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();
}

標籤：javascript 形式 输入 默认值

上一篇：如何使用SeleniumC#遍歷IWebElement串列

下一篇：如何在Javascript函式中檢查每個值是否滿足條件？