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

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 e.g <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   ;

}

CodePudding user response：

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

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

CodePudding user response：

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   ;

}