Solution 1 :

You have to use querySelectorAll and then loop over the returned collection:

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 only returns the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Problem :

I have a simple javascript code that changing the content of span elements.

Now this script working only for the first one span element. How can I fix it to make changeable all spans with only one no multiple javascript script?

MY CODE:

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>

By