如何修复Onclick函数失效及Uncaught TypeError: Cannot set properties of null错误

问题原因 #

你的JavaScript脚本被放在了<body>标签的最顶部，浏览器解析到<script>标签时，下方的<button id="mySubmit">还没被渲染到DOM树中，此时document.getElementById("mySubmit")会返回null，自然无法为其设置onclick事件。而Stack Overflow的代码片段会自动处理脚本的执行时机，所以能正常运行。

修复方案 #

方案1：将脚本移到DOM元素之后 #

把<script>标签放到<body>的末尾，确保所有DOM元素都已被浏览器解析后再加载脚本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="4style.css">
</head>
<body>
  <h1 id="myH1">Welcome</h1>
  <label>user name:</label>
  <input id="myText"> 
  <br>
  <br>
  <button id="mySubmit">Submit</button>

  <!-- 移到所有DOM元素之后 -->
  <script src="4userinput.js"></script>
</body>
</html>

方案2：监听DOM加载完成事件 #

在JavaScript代码中添加DOMContentLoaded事件监听，确保DOM完全加载后再绑定点击事件：

let username;
// 等待DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("mySubmit").onclick = function(){
    username = document.getElementById("myText").value;
    document.getElementById("myH1").textContent = `Hello ${username}`;
  };
});

两种方案任选其一即可解决问题：方案1更简洁，适合小型项目；方案2更灵活，即使脚本放在<head>中也能正常工作。

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