Не удается обновить textContent <span> (который назначен переменной) изнутри обратного вызова

У меня простая HTML-страница

введите описание изображения здесь

Когда я нажимаю кнопки «Игрок 1» и «Игрок 2», я хочу, чтобы изменения отражались на странице. В подсчетах консоли все идет хорошо, но почему страница не обновляет измененный счет? ( 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);
    }
}

Всего 3 ответа


Когда вы 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); } } 
 <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> 


let p2score = document.querySelector('#p2score').textContent присваивает значение textContent переменной счетчика. Это значение больше не связано с свойством текстового содержимого элемента. Вы должны ссылаться на элемент вместо

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

Есть идеи?

10000