addEventListener失效问题：点击按钮后日期仅显示瞬间即消失

嘿，我一眼就看出问题所在啦——你这是表单默认提交导致页面刷新，所以日期刚显示一秒就没了！

问题根源 #

你的Next按钮放在<form>标签里，浏览器默认会把这种按钮当成表单的提交按钮，点击它就会触发表单提交，页面一刷新，刚渲染的日期自然就消失了。

两种简单解决方案任你选： #

方案1：在JS里阻止默认行为

修改你的displayDate函数，加上阻止默认动作的代码就行：

var myForm = document.getElementById("my-form"); 
var lbl = document.getElementById("lbl"); 
var nextBtn = document.getElementById("next"); 

nextBtn.addEventListener("click", displayDate); 

function displayDate(e) {
  // 阻止浏览器默认的表单提交行为
  e.preventDefault();
  lbl.innerHTML = Date(); 
}

这里的e是点击事件的对象，调用e.preventDefault()就能让浏览器停止刷新页面，日期就能稳稳显示啦。

方案2：直接修改按钮类型

如果这个按钮本来就不需要提交表单，给它加个type="button"属性就行，浏览器就不会把它当成提交按钮了：

<form id="my-form"> 
  <label id="lbl"></label> 
  <button id="next" type="button">Next</button> 
</form>

这种方法不用改JS代码，改一行HTML就搞定，超省心。

试一下吧 #

不管选哪种方法，再点击Next按钮，日期都会乖乖留在页面上啦！

内容的提问来源于stack exchange，提问作者M.Sameh