表单submit按钮onClick事件首次点击无效问题求助

问题原因 #

表单的<input type="submit">按钮默认会触发表单提交行为，导致页面刷新。第一次点击时，replaceForm()函数虽执行了，但页面随即刷新恢复初始状态，所以看起来没生效；第二次点击时浏览器缓存了表单数据或提交行为被拦截，才让函数效果显现。

解决方案 #

有两种简单修复方式：

方式一：阻止按钮默认提交行为

修改HTML的onClick属性传入事件对象，在函数中阻止默认行为：

HTML代码修改：

<input type="submit" id="submit" onClick="replaceForm(event)">

JavaScript代码修改：

function replaceForm(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  var form = document.getElementById("form");
  form.style.display = 'none';
  document.getElementById("replacement").style.display = "block";
}

方式二：监听表单submit事件（更推荐）

监听表单submit事件更符合交互逻辑，同时拦截默认提交：

HTML代码去掉按钮onClick：

<input type="submit" id="submit">

JavaScript代码修改：

const form = document.getElementById("form");
form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  this.style.display = 'none';
  document.getElementById("replacement").style.display = "block";
});

额外注意 #

给replacement元素设置初始隐藏的CSS，避免页面加载时它就显示：

#replacement {
  display: none;
}

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