无法改变的默认值的数量输入Javascript

0

的问题

我使用Javascript(不熟悉的框架喜欢的角度只是还没有),并试图获取和显示值的数量输入从我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>

default-value forms input javascript
2021-11-22 23:36:26
1

最好的答案

3

首先,你应该打电话给你的数学。随机()内的循环,否则,你只会随机产生一个号码,所有你的骰子会有同样的编号。 第二,应该分配 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();
}
2021-11-22 23:47:06

其他语言

此页面有其他语言版本

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................