当前位置: 首页 > 知识库问答 >
问题:

未捕获的TypeError:无法设置属性“onClick”的null[duplicate]

阙弘博
2023-03-14

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

null

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>

null

当我使用submit(提交)按钮而不是alert(报警)单击按钮时,我得到的是错误

未捕获的TypeError:无法设置null的属性“onClick”

有谁能告诉我为什么我要面对这个错误吗??帮助解决它。

共有2个答案

邢新
2023-03-14

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");
    }
});
古刚洁
2023-03-14

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

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

这里的解决方案是在DOM就绪后执行脚本,如下所示:

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

处理像上面这样的DOM元素的所有JavaScript代码只能在加载DOM之后执行。

演示:小提琴

 类似资料:
  • 问题内容: 我收到以下错误 未捕获的TypeError:无法读取null的属性’appendChild’ myRequest.onreadystatechange @ script.js:20 与我下面的代码 这是我的JavaScript文件 这是内容 这是一个简单文本文件的内容。 我在这里按照@Tejs的建议将脚本标签放在html的底部,但仍然出现此错误。 问题答案: 执行回调时,页面上没有ID

  • 问题内容: 我正在尝试将Google MAP API v3与以下代码一起使用。 当我运行这段代码时,浏览器会这样说。 未捕获的TypeError:无法读取null的属性’offsetWidth’ 你有什么线索吗? 问题答案: 此问题通常是由于在需要运行JavaScript的javascript运行之前未渲染map div引起的。 您应该将初始化代码放在onload函数中或HTML文件底部的标记之前

  • 问题内容: 如果这个问题已经回答,我深表歉意。我尝试搜索解决方案,但找不到适合我的代码的任何解决方案。我还是jQuery新手。 对于两个不同的页面,我有两种不同类型的粘滞菜单。这是两者的代码。 我的问题是,底部粘性菜单的代码不起作用,因为第二行代码会引发错误,提示“未捕获的TypeError:无法读取未定义的属性’top’”。实际上,除非将第二行以下的其他jQuery代码放在第二行之上,否则根本不

  • 问题内容: 我收到此错误,它源自jquery框架。当我尝试在文档准备好加载选择列表时,出现此错误。我似乎找不到我为什么收到此错误的信息。 它适用于change事件,但是尝试手动执行功能时出现错误。 未捕获的TypeError:无法读取未定义的属性’toLowerCase’-> jquery-2.1.1.js:7300 这是代码 问题答案: 当您调用DOMReady时,的上下文将不是元素。 您可以通

  • 问题内容: 我有一些JavaScript代码会给出此错误 码 这个错误是什么意思? 问题答案: 好像您的值之一,属性键为“值”是未定义的。在执行if语句之前测试,和是否已定义:

  • 我刚开始使用D3,在我的演示脚本中出现了以下错误- firstd3.jsp:31未捕获的TypeError:无法读取未定义的属性“linear” 我的演示代码如下 是什么导致了这个错误?以及如何解决