Puis-je utiliser document.getElementById (someid) .onclick pour marquer un

Question

J'essaie d'appeler une fonction javascript onclick. Je l'ai écrit quelque chose comme ça

<script type="text/javascript"> 
    function readPage(){ 
     alert("Hello"); 
    } 

    document.getElementById('read').onclick=readPage; 
</script> 

<a id="read" href="">read</a> 

Je suis en train d'appeler la fonction readpage mais sa ne fonctionne pas? Si j'écris étiquette onclick l'intérieur fonctionne, mais la façon dont je l'ai écrit ci-dessus ne fonctionne pas. Pourquoi?

Answer 1

Il n'y a rien de mal sur la façon dont vous le faites, mais quand. Vous ne pouvez pas accéder au DOM (like running getElementById()) avant qu'il ne soit chargé. La meilleure chose à faire est d'exécuter votre code à l'intérieur window.onload comme ceci:

window.onload = function() { 
    document.getElementById("read").onclick=readPage; 
}; 

Answer 2

Vous d'abord désactiver le protocole de direction par défaut d'ancrage (à savoir, laissez pas aller à href)

1. Faire href="#" sur l'ancre.
2. Vérifiez l'exemple de fonction event.preventDefault()here.

Answer 3

Vous devez avoir:

<script type="text/javascript"> 
    function readPage(){ 
     alert("Hello"); 
    } 

    document.getElementById('read').onclick=readPage; 
</script> 

<a id="read" href="#">read</a> 

Answer 4

Il travaillera avec un vide href attribut (l'URL actuelle de la page sera utilisée), mais vous devez utiliser, comme déjà mentionné, window.onload pour attacher le gestionnaire de clic, ou vous devez déplacer le script bloc après l'élément a.

Sinon, getElementById ne trouve pas l'élément car il n'existe pas encore dans l'arborescence DOM.

<a id="read" href="">read</a> 

<script type="text/javascript"> 
    function readPage(){ 
     alert("Hello"); 
     return false; 
    } 

    document.getElementById('read').onclick=readPage; 
</script> 

Comme déjà mentionné, vous utilisez par exemple return false; pour faire le navigateur pas suivre l'URL. Vous en avez même besoin si vous changez l'URL en href="#" car sinon le navigateur fera défiler la page vers le haut.

Testez-vous: http://jsfiddle.net/Nj4Dh/1/

---

En savoir plus sur le traditional event registration model.

Answer 5

Il y a deux façons de le faire vraiment (sans les fonctions spécifiques du navigateur). L'un est

<script type="text/javascript"> 

    function stopDefault(e) //cross browser function for stopping default actionw 
    { 
     if (e && e.preventDefault) 
     { 
      e.preventDefault(); 
     } 
     else 
     { 
      window.event.returnValue = true; 
     } 
     return false; 
    } 

    function readPage(event){ 
     alert("Hello"); 

     return stopDefault(event);//prevent default action 
    } 



    window.onload = function(event){ 

     document.getElementById('read').onclick=readPage; 


    } 
</script> 

<a id="read" href="#">read</a> 

Ou:

<script type="text/javascript"> 
    function stopDefault(e) 
    { 
     if (e && e.preventDefault) 
     { 
      e.preventDefault(); 
     } 
     else 
     { 
      window.event.returnValue = true; 
     } 
     return false; 
    } 

    function readPage(event){ 
     alert("Hello"); 

     return stopDefault(event);//prevent default action 
    } 

</script> 
<a id="read" href="#" onclick="readPage(event)">read</a> 

Je l'ai utilisé la fonction stopDefault sd Vous devez arrêter l'action par défaut d'un lien, sinon il va essayer d'aller thats url dans le href .