11

我正在创建一个 HTML 页面，它是使用引导程序构建的。下面是最终的 HTML 代码和 hello.js 文件的代码：

document.getElementById("subm").onclick = function () {
  alert("Hello WOrld");
}
<!DOCTYPE html>
<html>
<head>
  <title>Calculator</title>
  <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>
  <script src="javascripts/bootstrap.min.js"></script>
  <script src="javascripts/hello.js"></script>
  <h1>Calculator</h1>
  <form class="form-horizontal center1">
    <div class="control-group">
      <label for="num1" class="control-label">Number1</label>
      <div class="controls">
        <input id="num1" type="number" placeholder="Enter an Integer">
      </div>
    </div>
    <div class="control-group">
      <label for="num2" class="control-label">Number2</label>
      <div class="controls">
        <input id="num2" type="number" placeholder="Enter an Integer">
      </div>
      <div class="control-group">
        <label for="options" class="control-label">Options</label>
        <div class="controls"><br>
          <select id="options">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <div class="controls"><br>
          <button id="subm" type="submit" class="btn">Calculate</button>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <input id="cal" type="text" placeholder="Calculator output" disabled="true">
        </div>
      </div>
    </div>
  </form>
</body>

当我使用提交而不是警报单击按钮时，我收到错误

未捕获的类型错误：无法将属性“onclick”设置为 null

谁能告诉我为什么我会遇到这个错误？帮助解决它。

4

5 回答 5

28

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

我假设这个脚本是在hello.js创建 DOM 之前添加的文件中添加的。

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

window.onload = function(){
    document.getElementById("subm").onclick=function(){
        alert("Hello WOrld");
    }
}

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

演示：小提琴

于 2013-06-13T06:27:26.973 回答
5

window.onload() 没有解决我的问题，所以我不得不编写代码来等待元素被加载。你可以这样做：

function waitForLoad(id, callback){
    var timer = setInterval(function(){
        if(document.getElementById(id)){
            clearInterval(timer);
            callback();
        }
    }, 100);
}

waitForLoad("subm", function(){
    console.log("load successful, you can proceed!!");
    document.getElementById("subm").onclick = function()
    {
        alert("I got clicked");
    }
});
于 2017-05-19T08:20:53.253 回答
4

正如我所见，您正在使用JQuery，然后使用 jQuery 的函数，为什么要使用 javascript。

这是您想要的代码：

$(document).ready(function(){
  $("#subm").click(function(){
      alert("Hello World");   
  });
});
于 2013-06-13T06:31:27.520 回答
3

这可能是因为脚本在 DOM 加载之前运行。

尝试将脚本放入

window.onload = function() {
   {your code}
}
于 2013-06-13T06:28:47.207 回答
1

我遇到了类似的问题......对我来说，它适用于以下代码

$(document).on('click','#subm',function() {
    alert("Hello World");
});
于 2013-06-13T07:08:52.030 回答