Как правильно написать цикл «для» JavaScript?

Question

Репозиторий GitHub, который я связал, не будет использоваться для каких-либо других вопросов (он не будет изменен, кроме как для помощи в этом вопросе .... ЭТО ИСПОЛЬЗУЕТСЯ ТОЛЬКО ДЛЯ ЭТОГО ВОПРОСА

Примечание. Я провел свое исследование и считаю, что мой код должен работать

Хорошо, так что если вам требуется остальноемоего кода, чтобы сделать правильное суждение об этом, не стесняйтесь перейти к: Мой репозиторий Github , который будет использоваться только для этого 1 вопроса . В репозитории GitHub, естьтакже является файлом CSS, но с ним проблем нет, просто включите его, чтобы вы могли видеть ВСЕ код.

Да, я знаю, что многие люди на этом сайте ненравится, когда люди включают ссылки «GitHub», однако мне легче объяснить, если у меня не весь код сидит здесь, чтобы создать беспорядок (легче, если я смогу сузить, какой код дает мне ошибку

Хорошо, вот этот цикл «для»:

var dropdown = document.getElementsByClassName("dropdown-btn");
  var i;

  for (i = 0; i < dropdown.length; i++) { //this is not getting called for some reason
    dropdown[i].addEventListener("click", something());
    alert("Please work");
  }

на самом деле не работает.Когда я помещаю "alert" над циклом for, например:

var dropdown = document.getElementsByClassName("dropdown-btn");


 var i;
 alert("This works");
  for (i = 0; i < dropdown.length; i++) { //this is not getting called for some reason
    dropdown[i].addEventListener("click", something());
    alert("This does not work");
  }

Предупреждение вызывается, как только вызывается метод, в котором находится цикл for.Я думаю, чтобы объяснить мой вопрос, что-то не так с моим циклом «для»?(Это работает в другом файле .html, поэтому я не уверен, почему он не работает в моей текущей рабочей области.)

ОБНОВЛЕНИЕ (18 февраля 2019 г.): Хорошо, я нашелчто вызывает ошибку.

Для человека, который прокомментировал и предложил использовать «console.log (dropdown.length);», это вызвало неожиданную ошибку:

function something(){


this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
}

Как я и говорил, это работает в другом файле, но по какой-то причине он говорит, что в "this.classList.toggle (" active); ", toggle" не определено. Является ли это предполагаемым определенный в этом файле, или это похоже на «функцию» по умолчанию? Благодаря всем моим исследованиям и знаниям языка JavaScript я уверен, что это «функция» по умолчанию, иесли кто-то не докажет, что я неправ, я не понимаю, почему это не работает.

Answer 1

Вот ваша проблема.

Задайте себе вопрос, почему вы получаете this.classList как неопределенное?

Если вы посмотрите дальше, вы обнаружите, что this - это объект окна, который не имеетclassList.Теперь спросите себя, почему объект окна?

Это потому, что something() является прослушивателем событий, который должен вызываться в ответ на событие.В строке dropdown[i].addEventListener("click", something()); вы не назначаете something() в качестве обработчика событий, вы вызываете метод без события, поэтому this.classList не существует, поскольку this является объектом окна.

Как прочее ответы упомянули, что вам нужно изменить это значение на:

dropdown[i].addEventListener("click", something);

, которое назначит событие something() событию click, без вызоваit.

Полный пример

function something(){
  console.log(this); //For Debug prurposes
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
}


/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
function drop(){
  var dropdown = document.getElementsByClassName("dropdown-btn");
  var i;

  for (i = 0; i < dropdown.length; i++) { //this is not getting called for some reason
    dropdown[i].addEventListener("click", something);
    console.log("Please wokrk");
  }
}

.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.active {
  background-color: green;
  color: white;
}

.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

<button class="dropdown-btn" onclick="drop()">OUR STORY 
    <i class="fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#about_us">ABOUT US</a>
    <a href="#community">COMMUNITY</a>
    <a href="#">HUMANITARIAN ACTION</a>
  </div>

Кстати, довольно необычно использовать встроенные события, такие как onClick=drop(), чтобы затем связать других слушателей событий с тем жеэлемент .На самом деле, лучше всего избегать встроенного javascript.

В будущем, пожалуйста, включите весь код, относящийся к вопросу, в сам вопрос .Как я уже упоминал в комментарии, нам легче помочь вам .

Answer 2

Проблема в том, что вы передаете функцию в качестве параметра, не заключая ее в вызывающую функцию.

Есть два способа сделать эту работу.

1. Удалить() из функции something и вызовите предупреждение внутри something

    for (i = 0; i < dropdown.length; i++) { //this is not getting called for some reason
      dropdown[i].addEventListener("click", something)
    }

    something () {
      alert('this is working')
      ...
    }

Поместите один вызов функции в ваш обработчик событий и поместите оба вызова функции внутри

    for (i = 0; i < dropdown.length; i++) { //this is not getting called for some reason
      dropdown[i].addEventListener("click", function () {
        something();
        alert("This works");
      })
    }

Здесь является примером:

Answer 3

Я наблюдал за репозиторием на GitHub и увидел, что в вашей html-части много ошибок, поэтому JS-часть не может работать.

Как раз об этом цикле, текущей html-частиis:

<button class="dropdown-btn" onclick="drop()">OUR STORY 
  <i class="fa-caret-down"></i>
</button>

Так, чтобы функция drop () в первый раз создала новый прослушиватель событий для кнопки, но не вызывала его.Если второй раз нажать на эту кнопку, то запускаются 2 действия: первое снова добавляет новый прослушиватель событий, щелчок по кнопке, второе - запуск прослушивателя событий, созданного в первый раз.

Там2 возможных решения

Решение 1

<button class="dropdown-btn" onclick="something()">OUR STORY 
  <i class="fa-caret-down"></i>
</button>    

Решение 2

<button class="dropdown-btn" >OUR STORY 
  <i class="fa-caret-down"></i>
</button>

С в части JS =(! удалить объявление drop ()!)

var dropdown = document.getElementsByClassName("dropdown-btn");

for (let i = 0, iMax=dropdown.length ; i < iMax ; i++) {
  dropdown[i].addEventListener("click", something);
}

, чтобы помочь понять, почему ваш код неправильный, попробуйте этот пример кода

var Compteur = 0;


function something(){
  console.log('call on something()', ++Compteur);
}


function drop(){
  var dropdown = document.getElementsByClassName("dropdown-btn");

  for (let i = 0; i < dropdown.length; i++) { 
    dropdown[i].addEventListener("click", something);
    console.log( 'adding event Listener on one dropdown-btn ', ++Compteur);
  }
}

<button class="dropdown-btn" onclick="drop()">OUR STORY </button>

Answer 4

Вы вызываете something вместо простой передачи вызываемой функции при попытке добавить eventListener.Снять скобки.

var dropdown = document.getElementsByClassName("dropdown-btn");
  var i;

  for (i = 0; i < dropdown.length; i++) { //this is not getting called for some reason
    dropdown[i].addEventListener("click", something);
  }
  
  function something() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
    dropdownContent.style.display = "none";
    } else {
    dropdownContent.style.display = "block";
    }
  }

<a class="dropdown-btn" href="#">Button 1</a>
<div style="display:none;">Dropdown Content Here</div>
<br />
<a class="dropdown-btn" href="#">Button 2</a>
<div style="display:none;">Dropdown Content Here</div>