classList.add与remove操作异常，点击按钮切换页面显隐出现闪烁如何解决？

问题原因 #

按钮位于<form>标签内部，未指定type属性的button默认是提交类型，点击后会触发表单提交逻辑，导致页面刷新，JS修改的DOM样式状态会被重置到页面初始状态，就出现了你看到的闪烁后恢复的现象。

解决方案 #

有两种常用修复方式，任选其一即可：

方案一：明确按钮类型 #

给html中的按钮添加type="button"属性，指定它为普通按钮，不会触发表单提交：

<button id="start" type="button">START</button>

方案二：阻止事件默认行为 #

在JS的点击事件回调中，阻止表单提交的默认行为：

button.addEventListener('click', (e)=>{
    e.preventDefault()
    firstPage.classList.add("hide");
    secondPage.classList.remove("hide");
    console.log("work");       
})

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