点击按钮后，不断跳转到我的html目录。
点击按钮后，不断跳转到我的html目录。
我试图展示一个带有添加按钮的表单，点击按钮时应切换显示属性。
但是每次我点击按钮时，控制台中都会显示“导航到“链接地址””，所以我在那里放置了一个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;
}
HTML代码：
Form Elements
