JS报错:Uncaught TypeError: Cannot read property 'addEventListener' of null

JS部分

document.getElementById("silen").addEventListener('click', displayDate);

function displayDate() {
document.getElementById("demo").innerHTML = '123';
}

html部分

<!doctype>
<html>
<head>
<meta charset="utf-8">
<meta name="silen" content="silen's place">
<link type="text/css" rel="stylesheet" href="test.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<button id="silen">Press it</button>
<p id="demo">duddu</p>

</body>
</head>
</html>

但是单击button后并没有反应 O(∩_∩)O

后来把js部分的代码加在了如下代码框内,解决,mark一下,原理理解的还没有那么好。

window.onload=function(){
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 4,214评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,401评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,544评论 1 10
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,767评论 0 8
  • JavaScript HTML DOM 通过HTML DOM,可以访问JavaScript HTML文档的所有元素...
    edwin_hei阅读 3,188评论 0 2

友情链接更多精彩内容