如何更新含变量的页面文本？实现health变量实时同步显示

问题原因 #

你创建的文本节点textNode4仅在初始化时使用了health的初始值，后续health变量的变化不会自动同步到DOM节点，导致页面文本无更新。另外原代码中var health = health属于冗余声明，无实际作用，建议删除。

解决方案 #

在update函数中，每次修改health后手动更新文本节点的内容：

// 初始化health变量
let health = 100;

// 创建文本节点并添加到页面
let textNode4 = document.createTextNode(health);  
document.body.appendChild(textNode4);

function update() {
  // 修改health值
  if (keyboard.e)
    health -= 1;

  if (keyboard.q)
    health += 1;

  // 关键：同步更新文本节点内容
  textNode4.nodeValue = health;
}

// 确保update函数持续执行（适配实时场景的循环调用）
function gameLoop() {
  update();
  requestAnimationFrame(gameLoop);
}
gameLoop();

补充说明 #

• 需确保keyboard对象能正确反映按键状态（比如通过keydown/keyup事件维护keyboard.e和keyboard.q的布尔值）。
• 使用requestAnimationFrame可让更新与浏览器渲染帧率同步，比setInterval更适合实时交互场景。

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