Javascript Can'；t更新文本内容<；span>；（分配给变量的）从回调中

我有一个简单的HTML页面

当我按下“播放器1”和“播放器2”按钮时，我希望更改反映在页面上。在控制台中，分数上升，一切正常，但为什么页面不更新更改后的分数？（

让p1得分

和

让p2得分

）

这是我的代码，谢谢

const p1button = document
    .querySelector('#p1')
    .addEventListener('click', scoreUp);
const p2button = document
    .querySelector('#p2')
    .addEventListener('click', scoreUp);

let p2score = document.querySelector('#p2score').textContent;
let p1score = document.querySelector('#p1score').textContent;

function scoreUp(e) {
    if (e.target.textContent === 'Player 1') {
        p1score++;
        console.log(p1score);
    } else {
        p2score++;
        console.log(p2score);
    }
}

---

当您执行

时，让p1score=document.querySelector（'#p1score'）.textContent您实际上是在保存文本内容的值，而不是对该值的引用。因此，
p1score
和
p2score
保存文本内容值（整数）的唯一副本

因此，当您递增
p1score
和
p2score
时，您只是递增这些变量所持有的值。因此，一旦增加了值，就应该通过执行以下操作将文本内容设置为增加的值

pscoreonelem.textContent=p1score

pScoreTwoElem.textContent=p2score

这将通过更改文本内容的值来有效地更新文本内容，以反映对
p1score
和
p2score
的更改：
const p1button=文档
.querySelector（“#p1”）
.addEventListener（“单击”，计分）；
const p2button=文档
.querySelector（“#p2”）
.addEventListener（“单击”，计分）；
设pscoreonelem=document.querySelector（“#p1score”）；
设pScoreTwoElem=document.querySelector（“#p2score”）；
设p2score=pScoreTwoElem.textContent；
设p1score=pscoreonelem.textContent；
功能评分（e）{
如果（e.target.textContent=='Player 1'）{
p1分数++；
pscoreonelem.textContent=p1score；
控制台日志（p1score）；
}否则{
p2score++；
pScoreTwoElem.textContent=p2score；
控制台日志（p2score）；
}
}
Player 1
玩家2


球员1分：0分


球员2分：0分
让p2score=document.querySelector（'#p2score'）。textContent
仅将textContent的值分配给score变量。该值不再连接到元素文本内容属性。您必须改为引用元素

const p1button = document
    .querySelector('#p1')
    .addEventListener('click', scoreUp);
const p2button = document
    .querySelector('#p2')
    .addEventListener('click', scoreUp);

let p1 = document.querySelector('#p1score');
let p2 = document.querySelector('#p2score');
let p1score = p1.textContent;
let p2score = p2.textContent;

function scoreUp(e) {
    if (e.target.textContent === 'Player 1') {
        p1.textContent = p1score++;
        console.log(p1.textContent);
    } else {
        p2.textContent = p2score++;
        console.log(p2.textContent);
    }
}

您需要将分数设置为p1score和p2score元素，如下所示：

if (e.target.textContent === 'Player 1') {
    p1score++;
    document.querySelector('#p1score').textContent = p1score;
    console.log(p1score);
} else {
    p2score++;
    document.querySelector('#p2score').textContent = p2score;
    console.log(p2score);
}

您需要包含代码而不是图像，请添加完整代码。p2score和p1score仅为参考。添加它们不会反映在页面上。您需要重新分配它。这不是双向绑定，而是大量重复的DOM查询。我只保存对这两个
元素的引用