javascript - 无法从回调中更新 的 textContent(已分配给变量)

Question

我有一个简单的 HTML 页面

当我按下按钮“Player 1”和“Player 2”时，我希望更改反射(reflect)在页面上。在控制台分数上升，一切都很好，但为什么页面不更新更改的分数？ (let p1score 和 let p2score)

这是我的代码，谢谢!

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);
    }
}

Answer 1

当您执行 let p1score = document.querySelector('#p1score').textContent; 时，您有效地保存了文本内容的值，而不是引用那个值。因此，p1score 和 p2score 拥有文本内容值(整数)的唯一副本。

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

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

pScoreOneElem.textContent = p1score;

pScoreTwoElem.textContent = p2score;

这将通过更改其值以反射(reflect)对 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);
    }
}

<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>