如何在函数每次运行时向数组追加数字实现[1,2,3,4,5,6]类累加效果？

• 原有循环逻辑错误：p1Wins初始为空时，循环条件i < p1Wins.length永远不成立，无法向数组中插入任何元素；就算后续数组有值，也会一次性插入多个重复序号，完全不符合「每次函数运行追加一个递增数字」的需求
• DOM赋值逻辑错误：直接给选中的.p1-scoreDOM节点赋值为数组，不会修改页面展示内容，需要修改DOM节点的textContent属性
• 没有对i变量做声明，会污染全局作用域

const p1Wins = [];

function raiseScore() {
  if(xWinMessage) {
    const p1Name = document.querySelector('.p1-name');
    p1Name.style.color = 'green';

    // 每次调用追加1个递增数字，数组当前长度+1就是下一个要插入的数值
    p1Wins.push(p1Wins.length + 1);
    
    const p1Score = document.querySelector('.p1-score');
    // 此处如果要展示完整序列就用join转成字符串展示，如果只需要展示最新得分就取数组最后一个元素
    p1Score.textContent = p1Wins.join(',');
    // 只展示最新得分的写法：p1Score.textContent = p1Wins.at(-1);
  }
}

每次raiseScore符合触发条件执行时，p1Wins就会追加一个比末尾元素大1的数字，最终会得到[1,2,3,4,5,6,...]的连续递增序列，页面的分数展示区域也会同步更新。

内容的提问来源于stack exchange，提问作者Andrew