网页JavaScript失效：but_1按钮无功能，控制台报cannot set property of null错误

问题根源 #

你的JavaScript脚本放在了<body>最顶部，浏览器解析HTML是从上到下顺序执行的。当代码走到document.getElementById('c1')时，页面中id为c1的<h2>元素还没被加载解析，所以Count_el的值是null。之后点击按钮调用add()函数时，试图给null的innerHTML赋值，就会抛出cannot set property of null的错误。而且脚本执行初期就出错，会导致add()函数定义异常，所以你加的console.log也没法输出。

解决方案 #

方案一：把脚本移到DOM元素之后

将<script>标签放到</body>闭合标签前，确保所有DOM元素加载完成后再执行脚本：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id='heading'>Count</h1>
<h2 id="c1">0</h2>
<button id="but_1" onclick="add()">Increment</button>
<br>
<button id="but_2" onclick="">Save</button>
<br>
<p id="data">Previous Entries: </p>

<script>
let Count_el = document.getElementById('c1')
let count = 0
function add(){
count +=1
Count_el.innerHTML = count
}
</script>
</body>
</html>

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

如果不想移动脚本位置，可以通过DOMContentLoaded事件确保DOM加载完成后再执行代码，同时要把add()函数挂载到全局作用域（因为内联onclick是在全局查找函数）：

document.addEventListener('DOMContentLoaded', function() {
  let Count_el = document.getElementById('c1')
  let count = 0
  function add(){
    count +=1
    Count_el.innerHTML = count
  }
  // 将函数暴露到全局，供onclick调用
  window.add = add
})

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