JavaScript修改HTML文本报null错误，两段代码单独可用却无法同时运行

你遇到的Uncaught TypeError: Cannot set property 'innerHTML' of null，核心原因是代码执行到设置innerHTML的那行时，通过选择器拿到的DOM元素不存在，返回了null，才会触发类型错误。
你观察到的“单独注释任意一段代码就能正常运行”的现象，本质是JS未捕获的运行时错误会直接中断当前执行栈的所有后续代码，根本不是两段代码逻辑冲突：

• 如果只保留第一段代码，代码执行根本走不到有问题的元素选择行，自然不会触发报错
• 如果只保留第二段代码，之前会导致元素丢失的操作没有执行，元素在DOM树里正常存在，自然也能正常读取

• 选择器拼写匹配错误：检查两段代码里所有用来取DOM的选择器，是不是和HTML结构里的ID/类名对得上——比如JS里写document.getElementById("discount-tip")，但HTML里实际给元素设的ID是discountTip，大小写不匹配就会返回null；单独跑另一段代码时不会触发这个选择逻辑，所以你之前没发现拼写问题
• innerHTML整体替换的副作用：如果第一段代码要对商店模块的父容器做整体重渲染，一定要把第二段代码需要操作的所有子元素，完整写进重渲染的HTML模板里——只要漏了一个对应ID的节点，第一段执行完DOM里就没有这个元素了，后续选择肯定拿到null
• 时序加载错位：如果你的JS是在页面开头引入、且没有做加载等待处理，执行代码时HTML还没解析到对应的元素位置，就会拿到null；单独运行某一段代码时，因为setInterval的回调是延迟触发的，等第一次执行时DOM已经加载完成，就能正常匹配到元素
• 代码健壮性补全：所有设置innerHTML的操作前，增加前置判空逻辑，避免单个元素缺失就中断整个定时循环，示例写法：

const shopPriceEl = document.getElementById("shop-price");
if (shopPriceEl) {
  shopPriceEl.innerHTML = `当前商品价格：${itemPrice}`;
}

• 加载顺序修正：把所有操作DOM的JS逻辑放到</body>标签最后引入，或者包裹在DOMContentLoaded事件回调里，确保DOM结构完全解析完成后再执行操作逻辑

内容的提问来源于stack exchange，提问作者Hamza Nasher-Alneam