Un simple exemple Unobtrusive JavaScript

Question

<script> 
var el = document.getElementById('btn'); 
e1.onclick=function() 
{ 
// 
    alert('hello'); 
}; 
    </script> 
    <button type="button" id="btn" >Log-in</button> 

Je suis tout simplement tester comment unobstrusive javaScript fonctionne avec un simple bouton événement onclick(), mais quand je clique sur le

Answer 1

rien ne se passe boîte alerte doesn bouton Log-in semble que votre script apparaît avant la bouton.

Il s'exécute avant que le bouton ne soit ajouté au DOM.

document.getElementById('btn') ne trouve pas le bouton parce que le bouton n'existe pas alors.

---

Déplacer le script après le bouton ou le mettre dans une fonction et appeler cette fonction après que le bouton existe (par exemple de l'événement de chargement de la fenêtre).

---

De même, ne renommez pas vos variables au milieu de votre code. Un minuscule L et le chiffre 1 ne sont pas interchangeables.

Answer 2

Le problème est que vous essayez d'attacher le gestionnaire avant que l'élément existe. <script> Les balises sont exécutées immédiatement et le navigateur n'a donc pas créé l'élément de bouton à ce moment-là.

Une solution serait de l'envelopper dans window.onload:

window.onload = function(){ 
    var el = document.getElementById('btn'); 
    e1.onclick=function() 
    { 
    // 
     alert('hello'); 
    }; 
}; 

Vous pouvez également utiliser l'événement DOMContentLoaded. Cela diffère de onload car il n'attend pas que les images et CSS soient chargés. Il est pas pris en charge par IE8 ou abaisser si:

document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("ready to attach events"); 
}); 

Answer 3

oui comme dit ci-dessus par 2 réponses que vous pouvez envelopper votre code window.onload que vous pouvez écrire une fonction et l'appeler onclick cas de bouton comme indiqué ci-dessous

function myfunction() { 
    alert('Hello'); 
    }; 

<input type="button" onclick="myfunction()" value="Click Me!" /> 

http://jsfiddle.net/wf8yJ/13/