How to consolidate/clean up .querySelector elements

Question

I have multiple of the same function toggleImage. I have them all written out in separate lines of code and they all function fine but I'm sure there's a more efficient way to write this.

I have tried document.querySelectorAll('#H01Overlay', '#H02Overlay', '#H03Overlay', '#H04Overlay') but then my functions all stop working...

function toggleImage(){
  document.querySelector('#H01Overlay').classList.toggle('img-hidden');
}

function toggleImage(){
  document.querySelector('#H02Overlay').classList.toggle('img-hidden');
}

function toggleImage(){
  document.querySelector('#H03Overlay').classList.toggle('img-hidden');
}

function toggleImage(){
  document.querySelector('#H04Overlay').classList.toggle('img-hidden');
}

Answer 1

First: Function names have to be unique. But you could have combined them to one function:

function toggleImage(){
  document.querySelector('#H01Overlay').classList.toggle('img-hidden');
  document.querySelector('#H02Overlay').classList.toggle('img-hidden');
  document.querySelector('#H03Overlay').classList.toggle('img-hidden');
  document.querySelector('#H04Overlay').classList.toggle('img-hidden');
}

---

Like mentioned before, you can use multiple selectors in a comma-separated string (with querySelectorAll). You need a loop to toggle the class of each element from this selection.

Working example:

function toggleImage(){
  let elms = document.querySelectorAll('#H01Overlay, #H02Overlay, #H03Overlay, #H04Overlay');
  
  for(i = 0; i < elms.length; i++) {
    elms[i].classList.toggle('img-hidden');
  }
}

.img-hidden {
  display: none;
}

<div id="H01Overlay">test</div>
<div id="H02Overlay">test</div>
<div id="H03Overlay">test</div>
<div id="H04Overlay">test</div>
<div id="H05Overlay">test</div>

<button type="button" onclick="toggleImage();">toggle</button>