我怎么能够？ 设置 foo.style.display 其中 foo 是基于 js 变量递增的元素名称

Question

我设置了我的程序，以便它自动生成 HTMl 并将其放入网页中。 每次引入新的 HTMl 都会获得一个新的 ID，紧随其后的是增量，例如<div id = "genQuestion0"> <div id = "genQuestion1">等。

初始div都通过CSS设置为不显示

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

第一个问题id = genQuestion0已设置为在生成时将其显示设置为block 。

我怎样才能做到这样，当按下一个按钮时，前面的问题显示更改为none ，下一个设置为block 。

这是我目前为我的 function 使用的，但它不起作用。

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

这是因为你只是字符串而不是 DOM 元素。

您可以使用document.getElementById(elementNameNeg).style.display = 'block';

Answer 2

所以改成这个？

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 ++;

}