Javascript - EventListener funktioniert nicht in der externen js-Datei

Ich versuche, die onClick-Tags in meinem HTML zu entfernen und einen EventListener stattdessen zu meiner externen js-Datei hinzuzufügen, aber es scheint nicht zu funktionieren.Javascript - EventListener funktioniert nicht in der externen js-Datei

Die folgenden Zeilen arbeiten:

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

Wenn Onclick zu entfernen und die folgenden mein Javascript hinzufügen, es funktioniert nicht:

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

function skriv() { 

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

}

Gesamte 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>

Quelle

2017-02-20 bovvan

Platzieren Sie Ihre <script> Tag direkt vor dem Schließen </body> Tag.
Oder verwenden Sie einen anderen Weg, um zu erkennen, dass Ihr DOM bereit ist.

<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>

Quelle

2017-02-20 10:19:54

Es weil nicht funktioniert, wenn das Skript geladen wird, gibt es keine Elemente sind, auf dem sie das Ereignis binden kann, zu finden.

Lösungen.

Verschieben Sie Ihr Skript an den unteren Rand des Body-Tags.
oder Sie können delegieren

document.addEventListener ("Klick", function (e) { for (var target = e.target; Ziel & & Ziel = this;! Target = target.parentNode) { // Schleifenelternknoten von dem Zielknoten an den Delegations if (target.matches()) { handler.call (Ziel, e); break; } } }, false);

Quelle

2017-02-20 10:23:27

Sie window.onload fehlen, Kasse 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); 
    } 
}

Quelle

2017-02-20 10:32:20

Ja, das funktioniert! Danke Vilas! Gute Lösung. Ich benutzte es in einem PHP-Formular, um eine externe js-Datei aufzurufen. Die Ereignis-Listener würden nicht funktionieren, bis ich das oben erwähnte tat. – sparkle

Javascript - EventListener funktioniert nicht in der externen js-Datei

Antwort

Verwandte Themen