Javascript 更新文本内容

Question

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

例子：

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