我怎么能夠？ 設置 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 ++;

}