Dice Roller - 为什么我没有错误或输出？

Question

我是 JavaScript 新手，我正在尝试创建一个骰子滚轮。用户可以选择骰子的数量和骰子的面数。我希望将各个骰子结果显示在网页上。我的JS是

howManySides = Number(document.getElementById('howManySidesInput').value);  
howManyDice = Number(document.getElementById('howManyDiceInput').value);

document.getElementById('submitButtonDice').onclick = function() {               
    for(let i = 1; i >= howManyDice; i += 1){
        var roll = ((Math.floor(Math.random() * howManySides)) + 1);
        document.getElementById('diceResultIndividual').innerHTML += roll + " ";
    }
}

我希望将每个骰子的结果添加到我的 HTML 文档中，但根本没有输出。我在第 6 行和第 7 行之间尝试了

console.log(roll)

，希望在控制台中看到错误，但我什么也没得到。我做错了什么？

Answer 1

你的循环条件有一个小错误。条件 i >= howManyDice 始终为 false。你应该将条件更改为 i <= howManyDice. and it will work fine.

并且你的控制台很清晰，因为你的 for 循环从未被执行过。

Answer 2

首先，您应该检查循环是否没有运行或者整个函数是否没有运行。 尝试这样的事情：

document.getElementById('submitButtonDice').onclick = function() {               
    console.log("Function Called");
    for(let i = 1; i >= howManyDice; i += 1){
        var roll = ((Math.floor(Math.random() * howManySides)) + 1);
        document.getElementById('diceResultIndividual').innerHTML += roll + " ";
    }
}

我想添加的另一件事是在你的循环中第二个参数有点错误。你应该添加 <=. This is because the second parameter is the one that checks if the loop should keep running and if i >= howManyDice 而不是 >= ，然后它会一直持续到无穷大，这可能是这里的问题。

所以应该测试的整体代码是：

document.getElementById('submitButtonDice').onclick = function() {               
    console.log("Button clicked");
    for(let i = 1; i <= howManyDice; i += 1){
        var roll = ((Math.floor(Math.random() * howManySides)) + 1);
        document.getElementById('diceResultIndividual').innerHTML += roll + " ";
    }
}