点击按钮跳转页面而非切换表单display属性的技术问题

嘿，我一眼就看出问题所在啦——你的按钮放在<form>标签内部，默认是提交按钮（submit类型），所以点击它时，浏览器不仅会执行你的addForm函数，还会触发表单的提交行为，导致页面刷新（看起来像是跳转到新地址）。这就是为啥你能看到console.log输出，但表单切换的效果瞬间就没了的原因。

解决方法有两种，选一个就行： #

方法1：给按钮添加type="button"属性

直接修改按钮标签，明确告诉浏览器这是一个普通按钮，而非提交按钮：

<button class="btn-add" onclick="addForm()" type="button">add</button>

方法2：在函数里阻止默认事件

如果不想改动HTML结构，也可以在addForm函数里接收事件对象，阻止它的默认提交行为：

function addForm(event){
  // 阻止表单提交的默认行为
  event.preventDefault();
  console.log("triggered");
  var x= document.getElementById("add-form");
  if(x.style.display === "none"){
    x.style.display="grid";
  } else {
    x.style.display="none";
  }
}

同时要记得在HTML里把事件对象传进去：

<button class="btn-add" onclick="addForm(event)">add</button>

补充说明 #

浏览器对<form>内部的<button>有默认规则：如果没指定type属性，它会默认是type="submit"，点击就会触发表单提交、页面刷新。这是个很容易踩的小坑，很多前端新手都会遇到～

修改后的完整关键代码（以方法1为例） #

JavaScript

function addForm(){
  console.log("triggered");
  var x= document.getElementById("add-form");
  if(x.style.display === "none"){
    x.style.display="grid";
  } else {
    x.style.display="none";
  }
}

HTML（修改按钮部分）

<div class="same-line">
  <label class="label full">Instances</label>
  <button class="btn-add" onclick="addForm()" type="button">add</button>
</div>

这样修改后，点击按钮就只会执行表单显示切换的逻辑，不会再触发页面刷新啦～

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