JavaScript运行正常但HTML内容未更新的问题求解

问题原因 #

• 核心问题为DOM属性拼写错误：JavaScript中用于读写DOM元素HTML内容的属性是驼峰格式的innerHTML，你代码中使用的innerHtml（字母H小写）不属于标准DOM属性，对其赋值不会触发页面内容更新，这就是控制台日志正常输出但文本无变化的原因。

解决方法 #

基础功能修复 #

直接修正innerHTML的拼写即可，修改后的JavaScript代码如下：

function update_text(element) {
  element.innerHTML = "Hello Other!";
  console.log("JS Ran");
}

HTML代码无需调整，修改后点击文本即可正常触发内容替换。

扩展实现：点击动态更新当前时间 #

要实现多次点击都能刷新为最新时间，只需调用Date API获取实时时间即可，示例代码：

function update_text(element) {
  // 获取格式为 时:分:秒 的当前本地时间
  const currentTime = new Date().toLocaleTimeString();
  element.innerHTML = `It is ${currentTime}`;
}

补充提示：如果你的赋值内容只有纯文本、不需要解析HTML标签，建议将innerHTML替换为textContent属性，该属性不会执行HTML解析，安全性更高、渲染性能更好。

内容的提问来源于stack exchange，提问作者T. Smith