addEventListener绑定click事件触发后修改内容不保存自动回退问题排查

你给出的代码本身逻辑正确，已经通过event.preventDefault()阻止了表单默认提交行为，正常运行不会出现文本自动回弹的情况，出现该问题的常见原因和对应修复方案如下：

• CSS样式冲突
  如果你引入的style.css中给.btn类设置了内容重置相关的动画、过渡效果，或是有定时触发的样式重绘逻辑，会强制将按钮内容恢复为初始值。你可以临时注释掉HTML中<link rel="stylesheet" href="style.css" />这行代码测试，如果问题消失，排查.btn相关的样式规则即可。
• 浏览器自动填充触发表单重绘
  当你的浏览器保存了当前站点的账号密码，打开页面后自动填充账号密码字段时，部分浏览器（尤其是Chrome内核浏览器）会自动触发表单元素重绘，重置按钮的innerHTML内容。这种情况可以给form标签添加autocomplete="off"属性解决，修改JS中插入form的代码即可：

  <form action="" class="sign-in-form" autocomplete="off">
  

• submit事件未完全拦截
  虽然你拦截了按钮的点击默认行为，但如果有其他代码给form绑定了submit事件且没有阻止默认行为，依然会触发表单提交刷新。可以直接给form绑定submit事件做拦截，替换原来的按钮点击事件逻辑会更稳妥：

  const form = document.querySelector(".sign-in-form")
  form.addEventListener("submit", (event) => {
    event.preventDefault()
    document.querySelector(".btn").innerHTML = "changed"
  })
  

• 浏览器兼容问题
  部分老旧浏览器对type="submit"类型按钮的默认行为拦截存在兼容问题，可以直接把按钮的type改为普通按钮，从根源避免提交行为触发：

  <button type="button" class="btn solid">Login</button>
  

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