How Can I? Set foo.style.display where foo is the element name based on a js variable rising in increments

Question

I have my program set up so that it autogenerates HTMl and places it into the webpage. Each introduction of new HTMl is given a new ID following along which increment it is at eg <div id = "genQuestion0"> <div id = "genQuestion1"> etc.

The inital div's have all been set through CSS as no display

[id^="genQuestion"]{
    text-align: center;
    display: none;
} 

The first question id = genQuestion0 has been set that upon generation its display is set to block .

How can I make it so that when a button is pressed the previous questions display is changed to none and the next one is set to block .

This is what I have currently for my function but it does not work.

var countclicks = 0;

const nextQuestion = () =>{
  var elementName = `genQuestion${countclicks}`;
  var elementNameNeg = `genQuestion${(countclicks - 1)}`;
  elementName.style.display = "block";
  elementNameNeg.style.display = "none";
  countClicks ++;

}

Answer 1

It's because your is just string and not DOM element.

You can access that element by using document.getElementById(elementNameNeg).style.display = 'block';

Answer 2

So change to this?

var countclicks = 0;
const nextQuestion = () =>{
  var elementName = `genQuestion${countclicks}`;
  var elementNameNeg = `genQuestion${(countclicks - 1)}`;
  document.getElementById(elementName).style.display = "block";
  document.getElementById(elementNameNeg).style.display = "none";
  countClicks ++;

}