如何实现HTML按钮为JavaScript变量添加数值？

先说说你原代码里的问题：

• addOne函数只是计算了variable + 1，既没修改全局的number变量，也没返回计算结果；而且函数参数传递的是值的副本，根本改不了外部的变量。
• 按钮的写法错误，现在页面一加载就会执行addOne(number)，但点击按钮时完全没反应——你根本没给按钮绑定点击触发的事件。
• document.write别乱用，页面加载完成后调用它会清空整个页面，用DOM操作更新指定元素才是正确做法。

给你改好的完整代码：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    // 用let声明变量，比var更符合现代JS规范，块级作用域更清晰
    let number = 123;

    // 页面加载完成后再初始化数值显示，避免找不到DOM元素
    window.onload = function() {
      updateNumber();
    };

    // 更新页面上的数值显示
    function updateNumber() {
      document.getElementById('numDisplay').textContent = number;
    }

    // 给变量加1，同时同步更新页面显示
    function addOne() {
      number += 1;
      updateNumber();
    }
  </script>
</head>
<body>
  <!-- 用ID标记要显示数值的元素，方便JS定位修改 -->
  <h1 id="numDisplay"></h1>
  <!-- 给按钮绑定点击事件，点击时触发加1操作 -->
  <button onclick="addOne()">点击加1</button>
</body>
</html>

关键改动说明：

• 直接操作全局变量number，避免参数传递带来的副本问题，确保变量值能被真正修改。
• 用updateNumber函数通过元素ID定位<h1>，用textContent更新内容，替代不安全的document.write。
• 按钮通过onclick属性绑定addOne函数，只有点击按钮时才会执行加1和更新显示的操作。
• 新增window.onload事件，确保页面所有元素加载完成后再初始化数值显示，避免出现找不到DOM元素的错误。

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