Fatal编程技术网

javascript onclick evnt不工作

javascript events

javascript onclick evnt不工作,javascript,events,onclick,Javascript,Events,Onclick,我正试图从中学习JavaScript。如上所述，我有以下main.js文件，该文件将更改背景颜色，但当我单击按钮时，什么也没有发生：- var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.background

我正试图从中学习JavaScript。如上所述，我有以下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>


Js
不要点击
com
当我打开这个firefox并单击按钮时，什么都没有发生，请帮助我：（

问题是您的脚本在加载DOM之前加载，所以当您的javascript添加事件处理程序时，您的按钮不存在。因为DOM解析是同步的（它按顺序进行，一次一行）您可以通过将脚本标记添加到HTML的底部，即
标记的上方来解决此问题。这是相当常见的做法

<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>
问题是您的脚本是在DOM加载之前加载的，因此当javascript添加事件处理程序时，您的按钮不存在您可以通过将脚本标记添加到HTML的底部，即
标记的上方来解决此问题。这是相当常见的做法

<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>
为什么不

<button id="yey">Dont click</button>
为什么不

<button id="yey">Dont click</button>
避免此类问题的最佳方法是绑定事件
DOMContentLoaded
，以等待DOM完全加载和解析

document.addEventListener（'DOMContentLoaded'，function（）{
log（“DOM已完全加载并准备好进行DOM操作”）；
var btn=document.querySelector（'button'）；
函数bgChange（）{
函数random（）{return'0'；}//只是为了举例说明！
var rndCol='rgb（'+random（255）+'、'+random（255）+'、'+random（255）+'）；
document.body.style.backgroundColor=rndCol；
}
btn.onclick=bgChange；
})；
不要点击

om！！！！
避免此类问题的最佳方法是绑定事件
DOMContentLoaded
以等待DOM完全加载和解析

document.addEventListener（'DOMContentLoaded'，function（）{
log（“DOM已完全加载并准备好进行DOM操作”）；
var btn=document.querySelector（'button'）；
函数bgChange（）{
函数random（）{return'0'；}//只是为了举例说明！
var rndCol='rgb（'+random（255）+'、'+random（255）+'、'+random（255）+'）；
document.body.style.backgroundColor=rndCol；
}
btn.onclick=bgChange；
})；
不要点击

om！！！！
脚本运行时元素（
按钮）不存在，因此无法工作。您需要将脚本移动到页脚（“惰性”解决方案），或使用函数，或。@cale_b表示脚本运行时按钮不存在。在浏览器实际解析html并通过按钮元素之前，
文档。querySelector（'button'）
将返回null。元素（
button
）脚本运行时不存在，因此无法工作。您需要将脚本移动到页脚（“惰性”解决方案），或者使用函数，或者。@cale_b表示脚本运行时按钮不存在。直到浏览器实际解析html并通过按钮元素，
document.querySelector（'button'））
将返回null。这不是一个完整的解决方案。充其量它解决了问题的一小部分。这可能是一个注释，而不是答案。这不是一个完整的解决方案。充其量它解决了问题的一小部分。这可能是一个注释，而不是答案。嗯。
延迟
100%跨浏览器兼容吗？CanIuse显示了良好的覆盖率-很好的提示！Hm.
defer
100%跨浏览器兼容吗？CanIuse显示了良好的覆盖率-很好的提示！