交替显示值答案

【问题标题】：Display while alternating values交替显示值
【发布时间】：2021-04-02 22:48:38
【问题描述】：

我有一个包含球员姓名的数组，我想按照数组的顺序显示每个问题的球员姓名，例如 arrNames['mark', 'john', 'jay']，我想与问一个标记，问题 2 john 等。每次迭代时，我都希望名称更改为数组中的以下内容。

这是我正在尝试的，但我只得到数组中的最后一个值，我该如何解决它？

const names = [];
var counter = 0;
const limit = 4 * localStorage.getItem('playersNum');

nextBtn.addEventListener('click', function() {
  if(counter < limit) {
    // Display player's name and ask question
    for (let i = 0; i < names.length; i++) {
        const playerName = document.getElementById('card-title');
        playerName.innerText = names[i];
        console.log(names);
    }
    const h6 = document.getElementById('h6');
    h6.innerHTML = "Question " + (counter + 1);
    nextBtn.innerHTML = "Next";
    // Randomely pick a question from the array
    randomItem = questions[Math.floor(Math.random()*questions.length)];
    random = document.getElementById('questions');
    random.innerText = randomItem;
    counter++; 
  } else {
    alert('No more questions !')
  }
});

【问题讨论】：

我只得到数组中的最后一个值有点不清楚，但是查看您的代码document.getElementById('card-title') 正在寻找id="card-title" 即单个元素，所以它只是在 for 循环的每次迭代中替换它的内部文本。因此为什么你只看到最后一个替换的项目作为它的最终值
innerText += variable
@LawrenceCherone 感谢您的回复，document.getElementById('card-title') 正在寻找 id="card-title" 即单个元素，因此它只是替换其内部文本for 循环的每次迭代。这正是我想要做的，但每次迭代时，名称都会更改为数组中的下一个
去掉for循环，做playerName.innerText = names[counter];

标签： javascript html css dom

【解决方案1】：

改变

// Display player's name and ask question
for (let i = 0; i < names.length; i++) {
  const playerName = document.getElementById('card-title');
  playerName.innerText = names[i];
  console.log(names);
}

到

const playerName = document.getElementById('card-title');
playerName.innerText = names[counter];

为什么，因为它会遍历所有名称，而与 counter 的当前值无关，因此为什么您只能看到姓氏。

【讨论】：

嘿，谢谢它的工作，当问题仍在进行时，它如何重新开始，例如当我有8个问题和3个玩家时，当它到达名称数组的末尾时，它会重新开始直到没有更多问题？
如果不进行测试，您可能会使用模 names[counter % questions.length];，然后无论计数器值如何，计数器都将始终在 questions.length 范围内