JavaScript实现HTML按钮点击展示输入内容，点击无响应问题排查

存在的问题 #

• 错误的alert方法调用：alert()是浏览器全局window对象提供的原生方法，并非DOM元素的实例方法。原代码中写的document.getElementById("btn1").alert(x)是在DOM按钮元素上调用不存在的方法，触发脚本类型错误后代码直接中断执行，因此没有任何展示反馈。
• DOM加载顺序的潜在缺陷：如果JavaScript逻辑代码放置在HTML结构之前，脚本执行时浏览器还未解析构建form、input对应的DOM节点，document.getElementById("btn1")和document.getElementById("in1")都会返回null，后续的事件绑定、取值操作会直接抛出空引用错误，点击按钮无法触发对应逻辑。

修正后的可运行代码 #

把脚本放置在DOM元素之后执行，修正alert的调用方式：

<form id="frm1">
  <input id="in1" type="text" name="" value="" />
  <input id="btn1" type="button" value="ok" />
</form>

<script>
document.getElementById("btn1").onclick = function() {
  var x = document.getElementById("in1").value;
  // 直接调用全局alert方法展示输入内容
  alert(x);
}
</script>

补充说明：如果脚本必须放置在页面头部区域，需要将事件绑定逻辑绑定在DOMContentLoaded事件回调中，等待DOM完全解析完成后再执行元素获取和事件绑定操作，避免空引用错误。

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