输入内容无法输出排查：点击按钮无响应且控制台报错问题

问题原因 #

你的JavaScript代码在页面DOM元素还未完全渲染时就已执行，此时document.getElementById('clickBtn')、document.getElementById('firstname')、document.getElementById('p1')都会返回null，后续尝试给clickBtn.onclick赋值时就会触发未捕获错误，导致功能失效。

解决方案 #

有三种常用方法可以解决这个问题：

1. 将JavaScript代码放在HTML末尾（</body>标签之前）

把脚本移到页面最后，确保DOM元素都已加载完成后再执行JS：

<p id="p1">Player1</p>
<input type="text" placeholder="hello" id="firstname">
<button id="clickBtn" type="button">Click</button>

<script>
let clickBtn = document.getElementById('clickBtn');
let firstname = document.getElementById('firstname');
let p1 = document.getElementById('p1');
clickBtn.onclick = function () { 
  p1.innerText = firstname.value; 
  console.log(firstname.value); 
}
</script>
</body>

2. 使用DOMContentLoaded事件包裹代码

监听DOM加载完成事件，确保代码只在DOM准备好后执行：

<script>
document.addEventListener('DOMContentLoaded', function() {
  let clickBtn = document.getElementById('clickBtn');
  let firstname = document.getElementById('firstname');
  let p1 = document.getElementById('p1');
  clickBtn.onclick = function () { 
    p1.innerText = firstname.value; 
    console.log(firstname.value); 
  }
});
</script>

<p id="p1">Player1</p>
<input type="text" placeholder="hello" id="firstname">
<button id="clickBtn" type="button">Click</button>

3. 给<script>标签添加defer属性

defer属性会让脚本在DOM加载完成后再执行，同时保持脚本在页面中的位置：

<script defer>
let clickBtn = document.getElementById('clickBtn');
let firstname = document.getElementById('firstname');
let p1 = document.getElementById('p1');
clickBtn.onclick = function () { 
  p1.innerText = firstname.value; 
  console.log(firstname.value); 
}
</script>

<p id="p1">Player1</p>
<input type="text" placeholder="hello" id="firstname">
<button id="clickBtn" type="button">Click</button>

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