点击按钮触发EventListener后页面1秒恢复初始状态，求排查原因

问题出在你的按钮嵌套在<a href="">标签里：

<a href=""><i id="openbutton" class="fa-solid fa-bars"></i></a>

点击按钮时，浏览器会先执行你写的JS逻辑（修改h1内容、打印日志），但紧接着会触发a标签的默认跳转行为——空href=""会导致页面刷新，所以修改后的内容会被重置，控制台日志也会因为页面刷新被清空。

三种解决方式： #

1. 在JS事件里阻止默认行为 #

修改点击事件函数，添加event.preventDefault()来拦截a标签的跳转：

openbutton.addEventListener("click", (event) => {
  event.preventDefault(); // 阻止a标签的默认跳转行为
  console.log("çalıştı");
  h1.innerText = "adsad";
})

2. 替换a标签为非跳转元素 #

既然这个标签不需要跳转功能，直接换成<span>即可：

<span><i id="openbutton" class="fa-solid fa-bars"></i></span>

3. 修改a标签的href属性 #

给a标签的href设置为javascript:void(0)，同样能阻止默认跳转：

<a href="javascript:void(0)"><i id="openbutton" class="fa-solid fa-bars"></i></a>

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