单击按钮时不断导航到我的html目录[重复]

Posted 2023-05-07

【中文标题】单击按钮时不断导航到我的html目录[重复]

【英文标题】：Constantly getting navigated to my html directory on clicking a button [duplicate]

【发布时间】：2020-06-12 12:56:44

【问题描述】：

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

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>

【问题讨论】：

控制台如下图所示

您的 console.log 也不应该被触发，除非您在某处告诉它执行此功能。如果它被触发，请确保添加一些阻止其默认行为的内容。喜欢return false;

你试过 event.preventDefault();在您的按钮上停止其默认行为？ developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

我在函数中放置一个控制台日志，并在控制台中获取该值

【参考方案1】：

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

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

【讨论】：

请尽可能将问题标记为重复。这个问题之前已经回答过很多次了

@JuanMendes 你是对的。感谢您的建议。

感谢这已解决问题