无法更改 Javascript 中数字输入的默认值
Posted
技术标签:
【中文标题】无法更改 Javascript 中数字输入的默认值【英文标题】:Cannot change default value of number input in Javascript 【发布时间】:2022-01-01 12:26:53 【问题描述】:我正在使用 javascript(还不熟悉 Angular 之类的框架),并试图从我的 html 中获取并显示数字输入的值,但是当我运行执行此操作的函数时,默认值为“1 " 来自 HTML 似乎是唯一使用的,即使我通过单击箭头将网站本身的输入更改为 10。
我认为就语法而言我已经正确编写了代码,所以我唯一的想法是也许输入必须以某种形式包装,并且“滚动”按钮更改为 type="submit “?
这是一个指向codepen 的链接,其中包含损坏的代码,以及下面涉及的部分的sn-ps。
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>
【问题讨论】:
需要在rollDice()
函数中获取输入的值。您只需在页面加载时设置一次numDice
。
为什么diceTotal
是一个数组>?
@Barmar 谢谢,当我考虑加载这些项目的页面时,这很有意义。这仍然需要一些时间来适应。该变量是一个数组,因为我最初概述了将数组索引添加在一起的想法,然后将其废弃但将其保留为数组。
【参考方案1】:
首先,您应该在 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 中数字输入的默认值的主要内容,如果未能解决你的问题,请参考以下文章