点击按钮切换元素显示状态后页面自动刷新恢复问题求助

问题根源 #

你的按钮s1大概率是表单（<form>）内的提交按钮（比如<button>默认类型为submit，或<input type="submit">），点击时会触发表单的默认提交行为，导致页面刷新，元素状态被重置。

解决方案 #

方法1：在点击事件中阻止默认行为 #

修改JavaScript代码，添加event.preventDefault()来阻断表单提交的默认行为：

var q1 = document.getElementById('q1')
var q2 = document.getElementById('q2')

s1.addEventListener('click', function(event){
    event.preventDefault(); // 阻止默认提交动作
    q1.classList.add("isHidden");
    q2.classList.remove("isHidden");
})

方法2：修改按钮为普通类型 #

如果s1是<button>标签，直接设置其type属性为button，避免默认触发提交：

<button type="button" id="s1">切换显示</button>

如果是<input>标签，则改为：

<input type="button" id="s1" value="切换显示">

方法3：排查其他刷新触发逻辑 #

若上述方法无效，检查代码中是否存在setTimeout、location.reload()这类主动触发页面刷新的代码，移除或调整相关逻辑即可。

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