无法从回调中更新<span>的textContent（已分配给变量）

Question

我有一个简单的HTML页面

当我按下“播放器1”和“播放器2”按钮时，我希望更改反映在页面上。在控制台得分上升时，一切都很好，但是为什么页面不更新更改的得分？ （for (i=1; ++i <= 1; i++) 和i）

这是我的代码，谢谢！

let p1score

Answer 1

执行numpy.power时，实际上是在保存文本内容的值，而不是对该值的引用。因此，let p1score = document.querySelector('#p1score').textContent;和p1score拥有自己的文本内容值（整数）的唯一副本。

因此，当您递增p2score和p1score时，您只是在递增这些变量所持有的值。因此，一旦增加了值，就应该通过

将文本内容设置为增加的值

p2score

pScoreOneElem.textContent = p1score;

这将通过更改其值以反映对pScoreTwoElem.textContent = p2score;和p1score的更改来有效地更新文本内容：

p2score

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

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

let p2score = pScoreTwoElem.textContent;
let p1score = pScoreOneElem.textContent;

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

Answer 2

<button id="p1">Player 1</button> <button id="p2">Player 2</button> <br /> <div class="player-scores"> Player 1 Score: <span id="p1score">0</span> <br /> Player 2 Score: <span id="p2score">0</span> </div>仅将textContent的值分配给score变量。该值不再连接到元素文本内容属性。您必须改为引用元素

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

Answer 3

您需要将得分设置为 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);
}