关于按钮点击导致页面内容消失与实现数值累加按钮的技术问询

嘿，我来帮你搞定这两个问题！

为什么点击按钮后页面内容会消失？ #

问题出在你用的document.write()方法上！这个方法的特性很关键：

• 当页面还在加载过程中调用它，它会把内容追加到页面里，这也是你一开始的document.write(x)能正常显示40的原因。
• 但当页面已经加载完成后（比如你点击按钮触发函数的时候），调用document.write()会直接清空整个HTML文档，然后写入新内容——这就是为什么你点击按钮后，原来的按钮和所有页面内容都没了，只剩运算结果。

怎么创建正确的累加按钮？ #

我们需要抛弃document.write()，改用DOM操作来更新指定区域的内容，这样就不会覆盖整个页面了。这里给你修改好的代码，完全满足你的需求：

<!-- 专门用来显示数值的容器 -->
<div id="number-display">40</div>
<button onclick="bottone1()" class="butto">+</button>

<script>
// 初始化数值：x是要被累加的目标，y是每次累加的数值
let x = 40;
const y = 40; // 如果y需要后续修改，可以改成let

function bottone1() {
  // 执行累加操作：把y加到x上
  x += y;
  // 获取显示容器，更新它的内容
  document.getElementById('number-display').textContent = x;
}
</script>

代码修改说明： #

• 新增了<div id="number-display">来存放要显示的数值，代替原来的document.write(x)，这样我们可以精准控制要更新的区域。
• 点击按钮时，先完成x += y的累加逻辑，再通过document.getElementById('number-display').textContent更新容器里的内容——只会修改数值显示区，页面其他元素（比如按钮）完全不受影响。
• 用let声明x（因为x需要被修改），y如果是固定的累加值就用const，更符合现代JavaScript的编码规范。

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