怎么在 HTML 里直接用 JS 变量的值
不能直接写 var name = "Alice" 然后在 HTML 标签里用 {{name}} 或 $name —— 浏览器不认这种模板语法。HTML 本身没有变量插值能力，所有“显示 JS 变量”都得靠 JS 主动操作 DOM。
- 最常用的是
document.getElementById()配合.innerText或.innerHTML - 如果变量在全局作用域（比如 script 标签里直接声明），它确实存在，但 HTML 不会自动读取，必须显式写 JS 去填
- 别把变量名当字符串用：写
document.getElementById("msg").innerText = username，不是"username" - 注意执行时机：JS 代码必须在对应 HTML 元素加载之后运行，否则
getElementById返回null
script 放哪儿才不会报错 Cannot set property 'innerText' of null
这个错误八成是因为 JS 执行时目标元素还没生成。浏览器从上到下解析，<script></script> 如果放在 里，而你要操作的 <div id="result"> 在 <code> 底部，那肯定找不到。
- 推荐把
<script></script>放在前面，确保 DOM 已就绪 - 或者用
DOMContentLoaded事件包裹逻辑：document.addEventListener("DOMContentLoaded", () => { /* 操作 DOM */ }) - 不用 jQuery 就别依赖
$(document).ready()，原生方案更轻、更可控 - 用
console.log(document.getElementById("xxx"))快速验证是否取到了元素
想让多个 HTML 元素共用一个 JS 变量，怎么避免重复写赋值逻辑
手动对每个 id 调用一次 innerText 很容易漏、难维护。关键是把变量和元素建立映射关系，而不是硬编码一堆 getElementById。
- 给需要填值的元素加统一
data-bind属性，比如<span data-bind="userName"></span> - 用
document.querySelectorAll("[data-bind]")一次性选中，再遍历赋值：els.forEach(el => el.innerText = data[el.dataset.bind]) - 变量名要和
data-bind值严格一致（区分大小写），不然查不到对应字段 - 如果变量是异步获取的（比如 fetch 后的响应），记得在数据拿到后再触发 DOM 更新，别提前执行
为什么改了 JS 变量，HTML 里显示没变
JS 变量变了，不代表页面自动更新——DOM 是静态快照，不是响应式绑定。你改的是内存里的值，不是页面上的文本节点。
立即学习“前端免费学习笔记（深入）”；
- 每次变量变化后，必须重新调用
.innerText或.textContent才能刷新视图 - 不要以为
let count = 0; count++就能让某个<span></span>自动加 1 - 如果变量在函数内（比如事件回调里），确保你操作的是同一个 DOM 元素引用，不是每次都新建或选错节点
- 调试时用
console.log打印变量值 + 元素内容，确认两边是否同步
改 JS 变量不等于改页面，这是最容易卡住的地方。很多人写了变量、也写了赋值语句，但没意识到“赋值”这一步必须在变量更新后再次执行，而且得执行在正确的时机、针对正确的元素。
