Javascript 更新 textContent

Question

我在更新文本内容时遇到问题，如果我使用 document.querySelector() 选择元素，那么它可以工作，但如果我将元素存储在一个对象中，那么我似乎无法更新它。

例子：

let player1 = {
    totalScore: 0,
    currentScore: 0,
    totalScoreBox: document.querySelector('#score--0').textContent,
    currentScoreBox: document.querySelector('#current--0').textContent
}

const updatePlayerScore = (player, value) => {
    player.totalScore += value;
    player.currentScore += value;
    player.currentScoreBox = parseFloat(player.currentScore); //Doesn't work
    document.querySelector('#current--0').textContent = parseFloat(player.currentScore); //Works
}

https://jsfiddle.net/Copopops/rsuc7m4g/1/

提前致谢。

Answer 1

currentScoreBox: document.querySelector('#current--0').textContent 这一行将 textContent 作为字符串检索，并将该字符串存储在 currentScoreBox 变量中。当您将 currentScoreBox 设置为另一个字符串时，您此时所做的只是替换该变量的值，它绝不会附加到您的 DOM。

相反，存储节点本身。

let player1 = {
    totalScore: 0,
    currentScore: 0,
    totalScoreBox: document.querySelector('#score--0'),
    currentScoreBox: document.querySelector('#current--0')
}

const updatePlayerScore = (player, value) => {
    player.totalScore += value;
    player.currentScore += value;
    player.currentScoreBox.textContent = parseFloat(player.currentScore);
}