关于javascript:未捕获TypeError:无法设置null的属性’onclick’

Uncaught TypeError: Cannot set property 'onclick' of null

本问题已经有最佳答案,请猛点这里访问。

我正在创建一个HTML页面,它是使用bootstrap构建的。 以下是hello.js文件的最终HTML代码和代码:

1
2
3
document.getElementById("subm").onclick = function () {
  alert("Hello WOrld");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
  Calculator
  <link rel="stylesheet" href="/stylesheets/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>
<body>
  <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery.js">
  <script src="javascripts/bootstrap.min.js">
  <script src="javascripts/hello.js">
  Calculator
  <form class="form-horizontal center1">
   
      <label for="num1" class="control-label">Number1</label>
     
        <input id="num1" type="number" placeholder="Enter an Integer">
     
   
   
      <label for="num2" class="control-label">Number2</label>
     
        <input id="num2" type="number" placeholder="Enter an Integer">
     
     
        <label for="options" class="control-label">Options</label>
       
          <select id="options">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
          </select>
       
     
     
       
          <button id="subm" type="submit" class="btn">Calculate</button>
       
     
     
       
          <input id="cal" type="text" placeholder="Calculator output" disabled="true">
       
     
   
  </form>
</body>

当我使用提交而不是警告点击按钮时,我收到错误

Uncaught TypeError: Cannot set property 'onclick' of null

任何人都可以告诉我为什么我面临这个错误? 帮助解决它。


问题似乎是你在加载元素之前执行脚本。

我假设此脚本添加在hello.js文件中,该文件在创建DOM之前添加。

这里的解决方案是在DOM准备好之后执行脚本,如:

1
2
3
4
5
window.onload = function(){
    document.getElementById("subm").onclick=function(){
        alert("Hello WOrld");
    }
}

所有处理DOM元素的JavaScript代码都必须在加载DOM之后执行。

演示:小提琴