如何读取输入框内的掷骰次数并执行对应次数的模拟掷骰操作

故障原因 #

• 原Roll函数仅执行单次掷骰逻辑，未读取输入框指定的掷骰次数，也没有循环执行对应次数的掷骰操作
• 直接使用元素ID作为全局变量操作DOM，部分浏览器不支持该特性，会触发变量未定义报错导致逻辑中断
• 未处理多次点击的计数累加问题，模拟结果不符合预期

修复后的完整代码 #

<html>
    <head>
        <meta charset="utf-8" />
        <title>Rollstats</title>
        <script src="http://compsciconcepts.com/random.js"></script>
        <script>
            // 提前获取DOM元素，兼容所有浏览器
            const doubleSpan = document.getElementById('doubleSpan');
            const sevenSpan = document.getElementById('sevenSpan');
            const naturalSpan = document.getElementById('naturalSpan');
            const desiredBox = document.getElementById('desiredBox');

            function Roll() {
                // 先重置计数，避免多次点击累加
                ResetCounts();
                // 读取输入的掷骰次数
                const rollTimes = Number(desiredBox.value) || 0;
                
                // 循环执行指定次数的掷骰
                for(let i = 0; i < rollTimes; i++) {
                    const roll1 = RandomInt(1, 6);
                    const roll2 = RandomInt(1, 6);

                    if (roll1 == roll2) {
                        doubleSpan.innerHTML = Number(doubleSpan.innerHTML) + 1;
                    } else if (roll1 + roll2 == 7) {
                        sevenSpan.innerHTML = Number(sevenSpan.innerHTML) + 1;
                        if (roll1 == 3 || roll1 == 4) {
                            naturalSpan.innerHTML = Number(naturalSpan.innerHTML) + 1;
                        }
                    }
                }
            }

            function ResetCounts() {
                doubleSpan.innerHTML = 0;
                sevenSpan.innerHTML = 0;
                naturalSpan.innerHTML = 0;
            }
        </script>
    </head>
    <body style="text-align: center">
        <h1>Dice Simulations</h1>
        <p>
            Desired number of rolls:
            <input type="number" id="desiredBox" min="0" max="9999999" value="1000" />
            <button onclick="Roll();">Click to Roll</button>
            <button onclick="ResetCounts();">Reset Counts</button>
        </p>
        <hr />
        <p>Number of doubles: <span id="doubleSpan">0</span></p>
        <p>Number of sevens: <span id="sevenSpan">0</span></p>
        <p>Number of Natural sevens:<span id="naturalSpan">0</span></p>
    </body>
</html>

修改说明 #

• 提前通过document.getElementById主动获取所有需要操作的DOM元素，兼容全浏览器
• 在Roll函数中先读取输入框的次数，通过for循环执行对应次数的掷骰逻辑
• 每次执行模拟前先调用ResetCounts清空历史计数，保证每次模拟结果独立

内容的提问来源于stack exchange，提问作者NFT