使用外部JavaScript文件将单击事件附加到按钮时出现问题_Javascript_Html_Dom

使用外部JavaScript文件将单击事件附加到按钮时出现问题

javascript html dom

使用外部JavaScript文件将单击事件附加到按钮时出现问题,javascript,html,dom,Javascript,Html,Dom,我试图通过外部JavaScript将click或OnClick事件附加到button元素，但它不起作用。有人能帮忙吗？我在下面写代码以供参考。 Html部分：- <head> <script src="script.js"></script> </head> <body> <button id="myBtn">ClickMe</button> <p id="demo"></p&g

我试图通过外部JavaScript将click或OnClick事件附加到button元素，但它不起作用。有人能帮忙吗？我在下面写代码以供参考。 Html部分：-

<head>
<script src="script.js"></script>
</head>
<body>
    <button id="myBtn">ClickMe</button>
    <p id="demo"></p>    
</body>

您需要等待DOM加载元素

html标记后的Def脚本。 解决方案1:

<head>
</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
  <!--Put script tag in end of body-->
  <script src="script.js"></script>
</body>

// SCRIPT
window.onload = function() {

 function myFunction() {
   document.getElementById("demo").innerHTML = "Hello World";
 }

 document.getElementById("myBtn").addEventListener("click", myFunction);

};

<script src="script.js"></script>

</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
</body>


点击我

您需要等待DOM加载元素

html标记后的Def脚本。 解决方案1:

<head>
</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
  <!--Put script tag in end of body-->
  <script src="script.js"></script>
</body>

// SCRIPT
window.onload = function() {

 function myFunction() {
   document.getElementById("demo").innerHTML = "Hello World";
 }

 document.getElementById("myBtn").addEventListener("click", myFunction);

};

<script src="script.js"></script>

</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
</body>


点击我

在HTML之后添加脚本标记，它肯定会解决您的问题

document.getElementById（“myBtn”）.addEventListener（“单击”，myFunction）；
函数myFunction（）{
document.getElementById（“demo”）.innerHTML=“Hello World”；
}


点击我

在HTML之后添加脚本标记，它肯定会解决您的问题

document.getElementById（“myBtn”）.addEventListener（“单击”，myFunction）；
函数myFunction（）{
document.getElementById（“demo”）.innerHTML=“Hello World”；
}


点击我

这是否回答了您的问题？您的问题和DOM加载的加载程序有关。请看上面-您的代码是外部的这一事实在这里不是一个因素。这是否回答了您的问题？这回答了你的问题吗？您的问题和DOM加载的加载程序有关。请看上面-您的代码是外部的这一事实在这里不是一个因素。这是否回答了您的问题？解决方案1在正文之外时不是有效的HTML-如果您最后将它放在正文内就可以了。没有必要。。。它是一个仍在执行的东西，以标准是完全必要的。对你来说，不同之处在于向上移动了一行，这实际上会使你的答案符合广泛接受的标准。不确定为什么推回这里。解决方案1在正文之外时不是有效的HTML-如果您在结尾将它放在正文内就可以了。没有必要。。。它是一个仍在执行的东西，以标准是完全必要的。对你来说，不同之处在于向上移动了一行，这实际上会使你的答案符合广泛接受的标准。不确定为什么推回这里。这个答案是不正确的-它不起作用，因为在传统的网页中加载顺序是围绕DOM的。它只在代码段查看器中工作，因为加载顺序没有正确模拟。我的错误。他将脚本放在HTML代码之前，HTML部分没有正确加载。编辑看起来不错，欢迎使用堆栈溢出+1.这个答案不正确-它不起作用，因为在传统的网页中，加载顺序是围绕DOM的。它只在代码段查看器中工作，因为加载顺序没有正确模拟。我的错误。他将脚本放在HTML代码之前，HTML部分没有正确加载。编辑看起来不错，欢迎使用堆栈溢出+1.