Javascript: переключить изменение содержимого нескольких элементов

Question

У меня есть простой код javascript, который изменяет содержимое элементов span .

Теперь этот скрипт работает только для первого элемента span . Как я могу исправить это, чтобы сделать изменяемыми все пролеты только одним скриптом javascript?

МОЙ КОД:

const span = document.querySelector('span');

span.addEventListener('click', (event) => {
  if (event.target.innerHTML === "Zavolajte nám ihneď") {
    event.target.innerHTML = "+421 911 111 111";
  } else {
    event.target.innerHTML = "Zavolajte nám ihneď";
  }
})

<span>Zavolajte nám ihneď</span><br><br>
<span>Zavolajte nám ihneď</span>

Answer 1

Вы должны использовать querySelectorAll, а затем l oop над возвращаемой коллекцией:

const spans = document.querySelectorAll('span');

spans.forEach(span => span.addEventListener('click', (event) => {
  if (event.target.innerHTML === "Zavolajte nám ihneď") {
    event.target.innerHTML = "+421 911 111 111";
  } else {
    event.target.innerHTML = "Zavolajte nám ihneď";
  }
}));

<span>Zavolajte nám ihneď</span><br><br>
<span>Zavolajte nám ihneď</span>

querySelector возвращает только первый элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null.