Javascript - 外部jsファイルでEventListenerが動作しない

私のhtmlのonClickタグを削除して、代わりに外部jsファイルにEventListenerを追加しようとしていますが、動作させられないようです。Javascript - 外部jsファイルでEventListenerが動作しない

次の行が仕事：

<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タグの下に移動します。
またはあなたが= e.target（VARターゲットのdocument.addEventListener（ "クリック"、機能（E）{ 委任

を使用することができます。& &ターゲットをターゲット=この;！ターゲット= target.parentNode） {対象から //ループの親ノードが委任ノードに（target.matches（））{ handler.call（ターゲット、e）の場合、ブレーク;} }}、偽）。

出典

2017-02-20 10:23:27

あなたがチェックアウト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

はい、window.onloadが欠落している、これは動作します！ありがとうVilas！良い解決策です。私はPHPのフォームでそれを使って外部のjsファイルを呼び出しました。私が上記を行うまで、イベントリスナーは機能しませんでした。 – sparkle

Javascript - 外部jsファイルでEventListenerが動作しない

答えて

関連する問題