更改后如何從html中獲取元素

Question

//HTML代碼部分

<section class="playersScore">
  <p class="label-score">
    Player's Score:
    <span id="pScore"> 0 </span>
  </p>
</section>

//JS代碼部分

const min = 1;
const max = 10;
let playerPoints = 0;
let computerPoints = 0;

const choices = section.addEventListener('click', function (event){ 
const x = Math.trunc(Math.random() * (max - min)) + min;
const x = Math.trunc(Math.random() * (max - min)) + min;
    if (event.target.id === 'rock' && x > 6) {
       console.log('Player WIN!!');
       playerPoints++;
       document.getElementById('pScore').textContent = playerPoints;

//更新 在此代碼中，您可以看到這部分“&& x > 6”。 我以這種方式制作計算機以在剪刀石頭布之間做出選擇。 嘗試按照您的要求向您展示一個簡短的代碼部分，我希望這足夠了。 並感謝顯示屏幕截圖的問題不要再犯同樣的錯誤

所以我想做一個游戲，如果你收集到 3 分，你就贏了。 快完成了，我只想讓玩家了解總是在變化的當前點數。 這是我的 html 代碼，其中包含值或屬性，這可能是我不確定是什么的問題。 您可以看到播放器或計算機收集點時的變化

我使用 document.getElementById('').textContent = variable 更改值，但更改后無法再次獲取它。

試圖用同樣的方式取回它，但不起作用。 正如您在圖像中看到的，如果打印它，我可以看到當前數字但是如果使用 id 選擇器或 span 選擇器甚至 class 選擇器再試一次，它什么也沒有顯示。

Answer 1

我認為您最好使用變量來存儲分數，而不是使用 DOM 元素。 然后你可以創建一個function來更新它，每次你需要更改分數時，使用function而不是直接設置它。

是這樣的：

let points = 0;
let playerScoreDisplay = document.getElementById('pScore');

function updatePoints(value){
    points = value;
    playerScoreDisplay.textContent = points;
}