Javascript - EventListener ne fonctionne pas dans le fichier js externe

J'essaie de supprimer les balises onClick de mon code HTML et d'ajouter un EventListener à mon fichier js externe, mais je n'arrive pas à le faire fonctionner.Javascript - EventListener ne fonctionne pas dans le fichier js externe

Les lignes suivantes fonctionnent:

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

Lors de la suppression onclick et en ajoutant ce qui suit à mon javascript, il ne fait pas:

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

function skriv() { 

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

}

html entier:

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

Source

2017-02-20 bovvan

Placez votre <script> étiquette juste avant votre fermeture </body> tag.
Ou utilisez un autre moyen pour détecter votre DOM est prêt.

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

Source

2017-02-20 10:19:54

Il ne fonctionne pas parce que lorsque le script est chargé, il n'y a pas d'éléments à trouver sur lesquels il peut se lier à l'événement.

Solutions.

Déplacez votre script en bas de l'étiquette du corps.
ou vous pouvez utiliser délégué

document.addEventListener ("cliquez sur", function (e) { (cible var = e.target; cible cible & & = this;! Target = target.parentNode) {// noeuds parents de la boucle de la cible vers le noeud de délégation if (target.matches()) { handler.call (cible, e); break;} }}, false);

Source

2017-02-20 10:23:27

vous manque window.onload, la caisse 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); 
    } 
}

Source

2017-02-20 10:32:20

Oui, cela fonctionne! Merci Vilas! Bonne solution. Je l'ai utilisé sous une forme php pour appeler un fichier js externe. Les auditeurs d'événement ne fonctionneraient pas jusqu'à ce que j'ai fait ce qui précède. – sparkle

Javascript - EventListener ne fonctionne pas dans le fichier js externe

Répondre

Questions connexes