为什么使用addEventListener修改innerText后会自动恢复为初始值？

你遇到的文本修改后自动恢复的问题，本质是表单默认提交行为导致的页面刷新，和addEventListener的绑定逻辑无关。<form>标签内的<button>元素如果不显式指定type属性，浏览器默认会将其识别为submit类型按钮，点击后会触发表单提交、页面重载，你通过JS修改的DOM状态就会随着页面刷新被重置为初始状态。

可选解决方案 #

方案1：修改按钮类型，取消默认提交属性 #

直接给button标签添加type="button"属性，即可避免触发表单提交：

<!-- 修改原HTML中的按钮代码 -->
<button id="btn" type="button">Button</button>

方案2：在事件回调中阻止默认行为 #

在点击事件的处理函数中调用preventDefault()，主动拦截表单默认提交行为：

// 修改原JS代码
function ChangeText(e) {
  // 阻止默认表单提交刷新逻辑
  e.preventDefault()
  let label = document.querySelector('#text');
  if (label.innerText == "Start Text") {
    label.innerText = "Text has been changed";
  }
}

可选优化提示 #

你原JS第一行的赋值逻辑是冗余的，addEventListener没有返回值，赋值给button变量没有实际作用，建议调整为：

const button = document.querySelector('#btn')
button.addEventListener("click", ChangeText)

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