Блог

Главная - Вопросы по программированию - JS: мне нужно, чтобы 3 заголовка требовали, чтобы щелчок / заголовок стал синим. Вопрос EventListener

JS: мне нужно, чтобы 3 заголовка требовали, чтобы щелчок / заголовок стал синим. Вопрос EventListener

#javascript #event-listener

#javascript #прослушиватель событий

Вопрос:

Изображение веб-страницы

Привет, требуется следующая функциональность.

  1. Щелкните один раз в любом месте документа / веб-страницы, первый заголовок станет синим; два других заголовка останутся черными.
  2. Щелкните еще раз в любом месте документа / веб-страницы, второй заголовок станет синим; 3-й заголовок останется черным.
  3. Щелкните еще раз в любом месте документа / веб-страницы, второй заголовок станет синим.

HTML-код:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">   <title> test </title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <h1 class="heading"> click once on webpage/document, I turn blue</h1>
  <h4 class="heading"> click twice on webpage/document, I turn blue</h4>
  <h5 class="heading"> click thrice on webpage/document, I turn blue</h5>

  <script src="index.js"> </script>
</body>
</html>

JS код:

 const total = document.querySelectorAll(".heading").length;

for (let i = 0; i < total; i  ) {
  document.addEventListener("click", function(){
  document.querySelectorAll(".heading")[i].style.color = "blue";
  });

}

цикл for работает не так, как ожидалось; что я делаю не так. Помогите, пожалуйста!

Ответ №1:

Вы можете сделать это таким образом, отслеживая индекс, в котором вы находитесь:

 const $headings = document.querySelectorAll(".heading");
let i = 0;

document.addEventListener("click", changeNextTitle);

function changeNextTitle() {
  $headings[i].style.color = 'blue';
  i  ;
  if (i >= $headings.length) {
    document.removeEventListener("click", changeNextTitle);
  }
} 
 <h1 class="heading"> click once on webpage/document, I turn blue</h1>
<h4 class="heading"> click twice on webpage/document, I turn blue</h4>
<h5 class="heading"> click thrice on webpage/document, I turn blue</h5>

Комментарии:

1. Спасибо @blex. Это сработало так, как я хотел. Поскольку я новичок, могу я спросить, что это за $. Это JQeury или просто имя константы, а могло быть и что-то еще. Кроме того, означает ли это, что единственное, что пропустил мой код, — это удаление EventListener ? Я был бы очень признателен, если бы вы могли прокомментировать это. Я хотел бы изучить блок-схему, как работает ваш код, мне любопытно! Спасибо и с наилучшими пожеланиями!

2. @mrnothing $ Это могло быть что-то еще. Мне просто нравится использовать это как соглашение в имени переменных, содержащих элементы DOM (элементы HTML). Удаление прослушивателя событий не требуется, его просто проще удалить, если он вам не нужен. Проблема в вашем коде заключалась в for цикле. Вы добавили прослушиватель событий 3 раза, по одному разу для каждого заголовка. Итак, когда вы нажали один раз, все 3 слушателя были запущены одновременно, и все 3 заголовка изменились.

3. В этой версии мы инициализируем i at 0 глобально. И мы добавляем прослушиватель событий один раз. Каждый раз, когда вы нажимаете, он изменяет цвет заголовка в индексе i и увеличивает его. Пока у нас больше не будет заголовков для изменения, он удаляет прослушиватель событий (он перестает прослушивать клики)

4. Большое вам спасибо @blex за ваши комментарии и информацию. Можем ли мы вообще не использовать для достижения этой функциональности с помощью цикла for? Потому что мы все равно используем цикл здесь, нет?

5. Это своего рода цикл, но с большой разницей по сравнению с for , while и forEach циклы: это асинхронно. Это означает, что вам нужно дождаться щелчка, прежде чем запускать следующую итерацию