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 = "[phone]";

  } else {

    event.target.innerHTML = "Zavolajte nám ihneď";

  }

})

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

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

Answer 1

您必须使用并循环访问返回的集合：querySelectorAllconst spans = document.querySelectorAll('span');spans.forEach(span => span.addEventListener('click', (event) => {&nbsp; if (event.target.innerHTML === "Zavolajte nám ihneď") {&nbsp; &nbsp; event.target.innerHTML = "[phone]";&nbsp; } else {&nbsp; &nbsp; event.target.innerHTML = "Zavolajte nám ihneď";&nbsp; }}));<span>Zavolajte nám ihneď</span><br><br><span>Zavolajte nám ihneď</span>querySelector仅返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回 null。