Question

JavaScript 中未将 addEventListener 分配给按钮

2020-06-28

67

javascript addeventlistener

我不明白为什么我的第一个按钮可以分配 eventlistener ，而第二个按钮却不能。没有错误消息，我能够访问其值，甚至可以通过 element.style.border="2px red solid" 更改其样式。

const recipeTypeMenuContainer = document.querySelector(".recipe-type-menu-container"),
      recipeTypeMenuSection = document.querySelector(".recipe-type-menu-section"),
      breakfast_menuButton = document.querySelector(".recipe-type-menu_breakfast"),
      appetizer_menuButton = document.querySelector(".recipe-type-menu_appetizer"),
      entrees_menuButton = document.querySelector(".recipe-type-menu_entrees"),
      dessert_menuButton = document.querySelector(".recipe-type-menu_dessert"),
      menuButtons = [breakfast_menuButton,appetizer_menuButton,entrees_menuButton,dessert_menuButton];

////////////RECIPE or BLOG section///////////////
////////****works***///////////////////

enterRecipePicture.addEventListener('click',function(){
    recipeOrBlogContainer.classList.add('js-fadehide');
    searchbarContainer.classList.add('js-fadehide');    
})
 
////////////TYPE OF RECIPE section///////////////
///***doesn't work and doesn't throw error**////

breakfast_menuButton.addEventListener("click",function(){
    recipeTypeMenuContainer.style.border = "2px red solid";
})

<div class="recipe-type-menu-container">
    <div class="recipe-type-menu-row"></div>
    <div class="recipe-type-menu-row">
      <center>
        <form class="recipe-type-menu-section" action="recipe-blog.php" method="POST">
          <button type="submit" class="recipe-type-menu_breakfast" id="recipetype_breakfast" name="recipe-type" value="breakfast" >breakfast</button>
          <button type="submit" class="recipe-type-menu_appetizer" id="recipetype_appetizer" name="recipe-type" value="appetizer">appetizer</button>
          <button type="submit" class="recipe-type-menu_entrees" id="recipetype_entrees" name="recipe-type" value="entrees">entrees</button>
          <button type="submit" class="recipe-type-menu_dessert" id="recipetype_dessert" name="recipe-type" value="dessert">dessert</button>
        </form>
      </center>
    </div>
    <!------ recipe-type-menu-row ----->
    <div class="recipe-type-menu-row"></div>

  </div>

Answer 1

您在按钮上使用 type="submit" ，因此当单击它时会提交表单，您需要添加 e.preventDefault() （查看此链接 how-does-e-preventdefault-work ）或使用 type="button" 如果您不想让按钮提交表单

const recipeTypeMenuContainer = document.querySelector(".recipe-type-menu-container"),
      recipeTypeMenuSection = document.querySelector(".recipe-type-menu-section"),
      breakfast_menuButton = document.querySelector(".recipe-type-menu_breakfast"),
      appetizer_menuButton = document.querySelector(".recipe-type-menu_appetizer"),
      entrees_menuButton = document.querySelector(".recipe-type-menu_entrees"),
      dessert_menuButton = document.querySelector(".recipe-type-menu_dessert"),
      menuButtons = [breakfast_menuButton,appetizer_menuButton,entrees_menuButton,dessert_menuButton];

////////////RECIPE or BLOG section///////////////
////////****works***///////////////////
/*
enterRecipePicture.addEventListener('click',function(){
    recipeOrBlogContainer.classList.add('js-fadehide');
    searchbarContainer.classList.add('js-fadehide');    
})
*/
////////////TYPE OF RECIPE section///////////////
///***doesn't work and doesn't throw error**////

breakfast_menuButton.addEventListener("click",function(e){
    e.preventDefault()
    recipeTypeMenuContainer.style.border = "2px red solid";
})

<div class="recipe-type-menu-container">
    <div class="recipe-type-menu-row"></div>
    <div class="recipe-type-menu-row">
      <center>
        <form class="recipe-type-menu-section" action="recipe-blog.php" method="POST">
          <button type="button" class="recipe-type-menu_breakfast" id="recipetype_breakfast" name="recipe-type" value="breakfast" >breakfast</button>
          <button type="submit" class="recipe-type-menu_appetizer" id="recipetype_appetizer" name="recipe-type" value="appetizer">appetizer</button>
          <button type="submit" class="recipe-type-menu_entrees" id="recipetype_entrees" name="recipe-type" value="entrees">entrees</button>
          <button type="submit" class="recipe-type-menu_dessert" id="recipetype_dessert" name="recipe-type" value="dessert">dessert</button>
        </form>
      </center>
    </div>
    <!------ recipe-type-menu-row ----->
    <div class="recipe-type-menu-row"></div>

  </div>