Question

我的test.jsp文件：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script  type="text/javascript" src="js/test.js"></script>
</head>

<body>
    <a href='#' id='mylink'>click me</a>
</body>
</html>

我的test.js文件：

alert("HELLO");

var myLink = document.getElementById('mylink');

myLink.onclick = function(){

    alert("I am a pop up ! ");

}

当我加载test.jsp页面时，Hello警报似乎很好。但是，当我单击click me时，什么也没发生。

Answer 1

在脚本运行时，尚未创建其余的DOM。

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>

<body>
    <a href='#' id='mylink'>click me</a>
    <script  type="text/javascript" src="js/test.js"></script>
</body>
</html>

将script标签移到底部是解决此问题的一种方法。

Answer 2

在这里工作正常。尝试将其包装在onload事件侦听器中，以确保在document.getElementById元素上调用mylink时DOM准备就绪。

window.addEventListener("load", function()
{
  var myLink = document.getElementById('mylink');
  myLink.onclick = function() {
    alert("I am a pop up ! ");
  }
});

<a href='#' id='mylink'>click me</a>

Answer 3

这是在页面上将内容加载到浏览器的时间安排的常见问题。浏览器将自上而下运行脚本并加载HTML。您的JS文件正在页面的顶部运行。这意味着，在其执行时，创建onclick事件时A HREF标记不存在。最大的问题是，当您拨打此行时：

 document.getElementById('mylink');

该HREF标记尚不存在，因为浏览器尚未将其下到该页面以将该标记加载到内存中（同样，因为您的JS文件位于页面顶部）。这是一个时间问题。该函数调用有效地返回null。

您需要将事件处理程序的创建放在body.onload事件上，或者由于您使用的是jQuery库，而放在document.ready事件中。这会延迟onclick事件的创建，直到将标签加载到内存中并准备就绪。例如：

 $(document).ready(function() {
      var myLink = document.getElementById('mylink');
      myLink.onclick = function(){
          alert("I am a pop up ! ");
      }
 });

Javascript简单的onclick示例不起作用

3 个答案: