Javascript - EventListener不能在外部js文件中工作

我试图删除我的html中的onClick标记，并将EventListener添加到我的外部js文件中，但似乎无法使其工作。Javascript - EventListener不能在外部js文件中工作

以下行的工作：

<input type="text" name="text" id="test"> 
<input type="submit" name="send" value="Skicka" id="klick" onclick="skriv()">

当拆卸的onclick并添加以下到我的javascript，这不：

document.getElementById("klick").addEventListener("click", skriv); 

function skriv() { 

    var input = document.getElementById("test").value; 
    alert("Hello" + " " + input); 

}

整个HTML：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="hello.css"> 
    <title> 
     Multimedia 
    </title> 
    </head> 
    <body> 
     <script type="text/javascript" src="hello.js"></script> 
     <div> 
      <form> 
       <p>Skriv ditt namn:</p><br> 
       <input type="text" name="text" id="test"> 
       <input type="submit" name="send" value="Skicka" id="klick"> 
      </form> 
      <p class="lol"> 
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here` 
      </p> 
     </div> 
    </body> 
</html>

来源

2017-02-20 bovvan

将您<script>标记正好在您关闭</body>标记之前。
或使用其他方式来检测您的DOM已准备就绪。

<body> 
 

 

 
    <div> 
 
    <form> 
 
     <p>Skriv ditt namn:</p><br> 
 
     <input type="text" name="text" id="test"> 
 
     <input type="submit" name="send" value="Skicka" id="klick"> 
 
    </form> 
 
    <p class="lol"> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here` 
 
    </p> 
 
    </div> 
 

 

 

 
    <script> // Or external JS URL 
 
    document.getElementById("klick").addEventListener("click", skriv); 
 

 
    function skriv() { 
 

 
     var input = document.getElementById("test").value; 
 
     alert("Hello" + " " + input); 
 

 
    } 
 
    </script> 
 

 
</body>

来源

2017-02-20 10:19:54

它不起作用，因为被加载脚本时，没有被发现的元素上，它可以绑定事件。

解决方案。

将脚本移动到body标签的底部。
，或者您可以使用委托

document.addEventListener（ “点击”，功能（E）{ 为（VAR的目标= e.target;目标& &目标=这一点;！目标= target.parentNode） {从目标到委派节点 //循环父节点，如果（target.matches（））{ handler.call（目标，E）; 断裂; } } }，假）;

来源

2017-02-20 10:23:27

你缺少的window.onload，结账demo with separate script.js file

window.onload = function() { 
    var buttonElement = document.getElementById("klick"); 
    var inputElement = document.getElementById('test'); 


    if (buttonElement) { 
    buttonElement.addEventListener('click', skriv); 
    } 

    function skriv() { 
    var input = inputElement.value; 
    alert("Hello " + input); 
    } 
}

来源

2017-02-20 10:32:20

是的，这个作品！感谢维拉斯！良好的解决方案。我用它在一个PHP形式来调用一个外部的js文件。事件监听者在我完成上述操作之前不会工作。 – sparkle

Javascript - EventListener不能在外部js文件中工作

回答

相关问题