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