时间戳

首页 > 解决方案 > addEventListener 没有被分配给 JavaScript 中的按钮

javascript - addEventListener 没有被分配给 JavaScript 中的按钮

问题描述

我不明白为什么我的第一个按钮可以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>

标签： javascriptaddeventlistener

解决方案

您正在使用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>

推荐阅读