如何将新的随机数输出到 JavaScript 中的 HTML 文档（通过 innerText）？

Question

我正在HTML和JavaScript学校做一个简单的数学游戏，这只是其中的一小部分。基本上我有一个我希望能够按下的按钮，每次按下它我都希望它输出一个新数字到 HTML 文档中 div 的 innerText。

现在我得到了随机数，但我必须刷新页面才能得到一个新的，因为如果我再次按下它，它会一直输出相同的。

const mathQuestion = document.getElementById('math-question')
const newNumbers = document.getElementById('new-btn')

newNumbers.addEventListener('click', setQuestion)

function setQuestion () {

    mathQuestion.innerText = calc.toString();
    console.log(calc);
}

var calc = Math.floor(Math.random() * 100) + 1;

是的，这很简单，可能不是最简单甚至不是正确的方法，但我在这里不知所措。

我怀疑我需要运行另一个函数来重置文本或在我设置了 innerText 之后，但我真的不知道从哪里开始。

Answer 1

目前，您只生成一次随机数，当您点击按钮时，您在 HTML 中设置相同的数字。这就是为什么无论您点击按钮多少次，您看到的都是相同的数字。

页面重新加载时数字会发生变化，因为每次页面重新加载时，都会生成新的随机数。

每次点击按钮时都需要re-generate随机数。为此，将随机数生成代码移到事件处理函数中，它应该会按预期工作。

function setQuestion () {
    var calc = Math.floor(Math.random() * 100) + 1;
    mathQuestion.innerText = calc;
}

此外，无需将数字显式转换为字符串。

如何将新的随机数输出到 JavaScript 中的 HTML 文档（通过 innerText）？

How do I output a new random number to an HTML doc(via innerText) in JavaScript?

javascript

random

numbers

refresh

new-operator