Блог

Я не уверен в том, как обнаруживать нажатия на кнопки в выпадающем меню. Массив.from присваивает addEventListener каждой кнопке в выпадающем списке. Однако он вызывает функцию для каждого из них, не прослушивая щелчок. Кроме того, кажется невероятно неэффективным назначать каждой отдельной кнопке EventListener. Файл JS находится ниже. Каждая кнопка выпадающего списка извлекается из API. Кажется, я не могу найти эффективное решение или даже такое, которое работает для кнопки начальной загрузки. ПОЖАЛУЙСТА, НИКАКОГО JQUERY.

 var dropDownBut=document.getElementById('dropdownMenu');

console.log("The crypto js file is connected");

 Array.from(document.getElementsByClassName("dropdown-item")).forEach(function(dropDownButton,index){
     dropDownButton.addEventListener('click',dropDown);
 });

function dropDown(){
    alert("The button was clicked at index");
}
  

Мой файл ejs с кнопкой boostrap находится ниже.

 <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <%parsedData.Data.forEach(function(parsedData){%>
            <button class="dropdown-item"  type="button"><%=parsedData.CoinInfo.Name%></button>   
        <%})%>


    </div>
    </div>
  

Вот рабочий пример подключения кнопок с помощью Array.from. Что касается добавления прослушивателя событий к каждой кнопке, вы должны это сделать, иначе у них не будет обработан щелчок. Существуют библиотеки, которые делают это более «элегантно», но они находятся под капотом, подключая все события.

Единственное предостережение, которое я мог бы заметить, заключается в том, что вы подключаете события до того, как будут созданы все ваши кнопки.

 var elements = document.getElementsByClassName('dropdown-item');

Array.from(elements).forEach((element) => {
  element.addEventListener('click', (event) => {
    alert(`Clicked ${event.target.innerText}!`);
  });
});  

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">

    <button class="dropdown-item" type="button">BTC</button>
    <button class="dropdown-item" type="button">NEO</button>
    <button class="dropdown-item" type="button">LTC</button>
    <button class="dropdown-item" type="button">XRP</button>



  </div>
</div>