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

Question

I have a simple HTML page

When I press on buttons "Player 1" and "Player 2", I want changes to reflect on the page. In console scores go up, everything's fine, but why page doesn't update the changed score? ( let p1score and let p2score )

Here's my code, thanks !

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

When you do let p1score = document.querySelector('#p1score').textContent; you are effectively saving the value of the text content, not a reference to that value. Thus, p1score and p2score hold their own unique copies of the values (integers) of the text content.

So, when you increment p1score and p2score you are only incrementing the values in held by these variables. Thus, once you've incremented your value, you should set the text content to be the incremented value by doing

pScoreOneElem.textContent = p1score;

pScoreTwoElem.textContent = p2score;

This will effectively update the text content by changing its value to reflect the changes to p1score and 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> 

Answer 2

let p2score = document.querySelector('#p2score').textContent only assigns the value of textContent to the score variable. That value is no longer connected to the element text content property. You must reference the element instead

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

Answer 3

You need to set scores to p1score and p2score elements like so :

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