使用JavaScript实现两个随机数求和，生成正常但无法相加

先说说你代码里的几个关键问题：

• ID重复冲突：页面里同时存在<p id="myBtn"></p>和<button id="myBtn">，DOM中ID必须唯一，这会导致按钮的点击事件或元素获取出现异常，直接删掉多余的p标签即可。
• 变量赋值与作用域错误：
  • var allNumbers =+ inTotal;犯了两个错：一是重新声明了局部的allNumbers，覆盖了全局同名变量，导致累加结果无法存入全局变量；二是=+是错误运算符，累加应该用+=。
  • num1和num2未用var/let/const声明，会变成全局变量，不符合规范，容易引发其他问题。
• 结果输出时机错误：document.write(allNumbers);在页面加载完成时执行，此时allNumbers还是初始值0，点击按钮后的计算结果根本没机会显示。而且document.write在页面加载后使用会直接覆盖整个页面，完全不适合用来更新内容，应该专门加元素显示总和。

下面是修正后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p id="number1"></p>
    <p id="number2"></p>
    <!-- 新增显示单次总和与累计总和的元素 -->
    <p id="singleTotal"></p>
    <p id="accumulatedTotal">累计总和：0</p>

    <button id="myBtn" onclick="myFunction()">Get random number</button>

    <script>
        // 全局变量存储累计总和
        let allNumbers = 0;

        function myFunction() {
            // 声明局部变量，避免全局污染
            const num1 = Math.floor(Math.random() * (7 - 1) + 1);
            const num2 = Math.floor(Math.random() * (7 - 1) + 1);
            
            // 将随机数渲染到页面
            document.getElementById("number1").innerHTML = num1;
            document.getElementById("number2").innerHTML = num2;
            
            // 计算单次总和并更新累计值
            const singleTotal = num1 + num2;
            allNumbers += singleTotal;
            
            // 将结果渲染到页面
            document.getElementById("singleTotal").innerHTML = `本次总和：${singleTotal}`;
            document.getElementById("accumulatedTotal").innerHTML = `累计总和：${allNumbers}`;
        }
    </script>
</body>
</html>

修正点说明：

1. 删除重复ID的p标签，保证DOM元素ID唯一性。
2. 用let声明全局累计变量，const声明局部随机数变量，符合变量声明规范。
3. 拆分随机数生成与DOM赋值逻辑，代码更清晰易读。
4. 新增元素显示单次和累计总和，点击按钮后直接更新页面内容，替代不合理的document.write。
5. 修正累加运算符+=，确保累计总和计算正确。

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