javascript - 单击按钮时不断导航到我的 html 目录

Question

这个问题已经有答案了:

Can I make a <button> not submit a form? (8 个回答)

已关闭 3 年前。

我试图显示一个带有添加按钮的表单，单击它时应该切换显示属性。但是每当我单击按钮时，我都会导航到控制台中的“链接地址”，所以我放置了一个console.log 被触发。我不明白我哪里出错了。这是我的代码片段:

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";
  }

.form-box{
 display: grid;
 grid-template-columns: repeat(20,50px);
 grid-template-rows: repeat(40,50px);
 width: 100%;
}

.heading{
  font-size: 22px;
  font-weight: 600px;
  grid-row: 2/3;
  grid-column: 3/6;
}

.line{
  height: 2px;
background: #F2F2F2 0% 0% no-repeat padding-box;
opacity: 1;
width: 100%;
opacity: 1;
grid-row: 3/4;
grid-column: 3/15;
}

.form{
  grid-column: 3/12;
  grid-row:4/10;
  display: grid;
  grid-auto-rows: 50px;
}

.same-line{
  display: flex;
 align-items: center;
}

.full{
  flex:1;
}

.btn-add{
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

.btn-add:hover{
  color: #F08520;
}


.add-form{
  grid-row:12/16;
  display: none;
}

.btn-submit{
  grid-row: 18/19;
  grid-column:10/12;
  display: flex;
  justify-content: center;
}
.btn-style{
  border: none;
  outline: none;
  background: #F08520;
  width: 90px;
  border-radius: 7px;
  color: white;
}

.btn-style:hover{
  color: aqua;
}

.select-input{
  height: 35px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
color: #AAAAAA;

}

.form-input{
  height: 35px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
 border: 1px solid #DDDDDD;
 opacity: 1;
 border-radius: 4px;
 }
 .form-textarea{
  height: 70px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
 border: 1px solid #DDDDDD;
 opacity: 1;
 border-radius: 4px;
 resize: none;
 }

.label{
  font-size: 15px;
  color: #666;
  padding-top: 10px;
  font-family: 'Nunito Sans', sans-serif;
}

<div class="form-box">
  <p class="heading">Form Elements</p>
  <div class="line"></div>
  <form class="form">
    <label class="label">First Name</label>
    <input class="form-input" type="text" name="" id="">
    <label class="label">Last Name</label>
    <input class="form-input" type="text" name="" id="">
    <label class="label">Age</label>
    <input class="form-input" type="text" name="" id="">
    <div class="same-line">
    <label class="label full">Instances</label>
    <button class="btn-add" onclick="addForm()">add</button>
    </div>
    <label class="label">Address</label>
    <input class="form-input" type="text" name="" id="">
    <label class="label">Type</label>
    <select class="select-input" name="" id="">
      <option value="">Home</option>
      <option value="">office</option>
      <option value="">others</option>
    </select>
    <div id="add-form" class="add-form">
        <label class="label">Address2</label>
        <input class="form-input" type="text" name="" id="">
        <label class="label">Type</label>
        <select class="select-input" name="" id="">
          <option value="">Home</option>
          <option value="">office</option>
          <option value="">others</option>
        </select>
    </div>
    <label class="label">comments</label>
    <textarea class="form-textarea"></textarea>
  </form>
  <div class="btn-submit">
   <button class="btn-style">Submit</button>
  </div>
  <div id="new">

  </div>
  </div>

Answer 1

表单中的按钮元素点击后会自动提交表单。您需要将其类型设置为按钮。

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