javascript onclick事件无法正常工作
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript onclick事件无法正常工作相关的知识，希望对你有一定的参考价值。
我正在尝试从here学习javascript。正如告诉here我有以下main.js文件，这将改变背景颜色，但当我点击按钮时没有发生任何事情： -
var btn = document.querySelector('button');
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
btn.onclick = bgChange;
和index.html文件： -
<!DOCTYPE html>
<html>
<head>
<title>Js</title>
<link rel="stylesheet" href="stylesheet.css" />
<script src="main.js"></script>
</head>
<body>
<button>Dont click</button>
<p id="p1" > om !!!!</p>
</body>
</html>
当我打开这个Firefox并点击按钮没有任何反应请帮助我:(
答案
问题是您的脚本在DOM加载之前加载，因此当您的javascript添加事件处理程序时，您的按钮不存在。由于DOM解析是同步的（它按顺序发生，一次一行），您可以通过将脚本标记添加到HTML的底部，</body>标记上方来解决此问题。这是相当普遍的做法。
<html>
<head>
<title>Js</title>
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<button>Dont click</button>
<p id="p1" > om !!!!</p>
<script src="main.js"></script>
</body>
</html>
还有一个名为defer的属性用于脚本标记，它将完成同样的事情。它会强制脚本标记最后加载，您可以像这样使用它：
<html>
<head>
<title>Js</title>
<link rel="stylesheet" href="stylesheet.css" />
<script defer src="main.js"></script>
</head>
<body>
<button>Dont click</button>
<p id="p1" > om !!!!</p>
</body>
</html>
另一答案
避免此类问题的最佳方法是将事件DOMContentLoaded绑定到等待DOM完全加载和解析。
document.addEventListener('DOMContentLoaded', function() {
console.log("DOM is fully loaded and ready for DOM manipulation.");
var btn = document.querySelector('button');
function bgChange() {
function random() {return '0';} // Just to illustrate!
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
btn.onclick = bgChange;
});<button>Dont click</button>
<p id="p1"> om !!!!</p>另一答案
为什么不呢
<button id="yey">Dont click</button>
和
var btn = document.getElementById("yey");
以上是关于javascript onclick事件无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
Javascript 和 jQuery 中 onclick 与 click的区别拙见
WKWebView 不再与 iOS10 中的 Javascript 交互
html js问题，onclick事件无法调用（IE11，火狐两个浏览器）