如何获取HTML中已动态更新的玩家分数元素值？

首先看你代码里的几个关键问题，这大概率是导致你获取不到更新后分数的根源：

1. 重复声明变量引发语法错误
   你的JS代码里重复声明了const x：

   const x = Math.trunc(Math.random() * (max - min)) + min;
   const x = Math.trunc(Math.random() * (max - min)) + min;
   

   const变量不允许重复声明，这会直接抛出语法错误，导致后续更新DOM的代码根本无法执行。建议打开控制台的错误提示面板，这类语法错误会被明确标记。删掉其中一行重复的声明即可。

2. 确保DOM元素获取逻辑正确
   如果你是在页面初始化时就缓存了pScore元素的引用，后续一直复用这个旧引用，理论上不会有问题，但如果存在元素被重新渲染、替换的场景，就会导致引用失效。正确的做法是每次需要获取分数时，重新获取元素：

   // 每次获取分数时执行
   const scoreElement = document.getElementById('pScore');
   const currentPlayerScore = scoreElement.textContent.trim();
   const parsedScore = parseInt(currentPlayerScore, 10);
   

   注意用trim()处理文本内容，避免原HTML里的空格影响数值解析；同时保持更新和获取时使用相同的属性（比如都用textContent，不要混用innerText）。

3. 确认事件监听的目标元素已正确获取
   你的代码里用了section.addEventListener，但没有看到获取section元素的代码，比如const section = document.querySelector('section.playersScore');。如果section变量未定义，事件监听根本不会绑定，点击操作自然不会触发分数更新逻辑。

修复后的完整JS示例：

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

// 先获取目标section元素
const section = document.querySelector('section.playersScore');

section.addEventListener('click', function (event){ 
  // 仅声明一次随机变量x
  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;
     // 测试获取更新后的分数
     const updatedScore = document.getElementById('pScore').textContent.trim();
     console.log('当前玩家分数：', updatedScore);
  }
});

修复后点击rock按钮，控制台会同时打印胜利提示和当前分数，此时用选择器获取的内容就是更新后的值了。

内容的提问来源于stack exchange，提问作者Gufi