JS开发计分器点击reset按钮后玩家得分文本无法重置如何解决？

问题根源 #

• reset事件回调内错误修改了存储DOM节点的变量：你把p1Score、p2Score这两个原本存储分数显示DOM节点的变量直接赋值为0，覆盖了原有的DOM引用，后续玩家点击加分时访问.textContent会触发报错，导致分数不再更新。
• 没有重置p1Numb、p2Numb这两个存储实际分数的数值变量，就算DOM显示改了，后续加分逻辑还是会沿用重置前的旧数值判断。
• 原有胜负判断逻辑存在边界错误：玩家得分达到5时的判定逻辑写反了，会出现得分到5后另一方获胜的异常。

修复后的JS代码 #

console.log(`on`)
let p1btn = document.querySelector(`#p1`);     
let p2btn = document.querySelector(`#p2`);
// 存储分数显示DOM的变量保持不变
let p1Score = document.querySelector(`#p1Score`);
let p2Score = document.querySelector(`#p2Score`);
let total = document.querySelector(`span`); 
let buttons = document.querySelectorAll(`button`);
// 存储实际分数的数值变量
let p1Numb = parseInt(p1Score.textContent);
let p2Numb = parseInt(p2Score.textContent);
let reset = document.querySelector(`#reset`);
let winner = document.querySelector(`#hiddenWin`);
let realwin = document.querySelector(`#winner`);

reset.addEventListener(`click`,()=>{
    // 重置数值变量
    p1Numb = 0;
    p2Numb = 0;
    // 更新DOM显示
    p1Score.textContent = p1Numb;
    p2Score.textContent = p2Numb;
    realwin.textContent = ``;
})

p1btn.addEventListener(`click`,()=>{
    if(p1Numb<5 && p2Numb<5){
        p1Numb ++;
        p1Score.textContent = p1Numb;
        // 加分后判断是否获胜
        if(p1Numb === 5) {
            realwin.textContent = `p1`
        }
    }
})
        
p2btn.addEventListener(`click`,()=>{
    if(p2Numb<5 && p1Numb<5){
        p2Numb ++;
        p2Score.textContent = p2Numb;
        // 加分后判断是否获胜
        if(p2Numb === 5) {
            realwin.textContent = `p2`
        }
    }
})

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