我使用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>