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文件中工作

回答

相關問題