Problema con getElementById

mickey123 · 8 Apr 2015

Salve a tutti,

sto studiando javascript da un libro, dove penso che in un esempio, ci sia un errore di stampa. Ho una pagina html dove c'è il codice seguente:

HTML:

<p>
In questo capolavoro cinematografico, <a id="berenger" href="#">Tom Berenger</a>
interpreta un soldato americano nella jungla panamense.
</p>

e da una pagina esterna, tipo 'codice.js' , voglio puntare sull'id del tag <a> per poi stamparne il nome del tag dentro una alert. Penso sia questo lo scopo del codice dell'esempio. Vi posto anche il contenuto della pagina codice.js :

HTML:

var target = document.getElementById("berenger");

alert(target nodeName);

---------------------------------------------------------------------------

Ma quando apro il browser, non succede nulla...

c'è qualcuno che mi può aiutare? grazie in anticipo.

WmbertSea · 8 Apr 2015

Ciao, nodeName è una proprietà dell'elemento in questione quindi ci si può accedere tramite la sintassi a punti: target.nodeName.
Inoltre accertati che l'elemento sia stato creato sul DOM della pagina, altrimenti l'alert non restituirà alcun risultato.

mickey123 · 8 Apr 2015

eh..purtroppo non succede nulla...

questo è esattamente il codice che c'è adesso nella pagina html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prova Javascript</title>
<script type="text/javascript" src="prova2.js"></script>
</head>

<body>

<h1>One Shot One Kill. A colpo sicuro (1993)</h1>

<p>In questo capolavoro cinematografico, <a id="berenger" href="/name/nm0000297/">Tom Berenger</a>
interpreta un soldato americano nella jungla panamense.
</p>

</body>
</html>

mentre nella pagina javascript:

HTML:

// JavaScript Document

var target = document.getElementById("berenger");
alert(target.nodeName);

WmbertSea ha scritto:
Ciao, nodeName è una proprietà dell'elemento in questione quindi ci si può accedere tramite la sintassi a punti: target.nodeName.
Inoltre accertati che l'elemento sia stato creato sul DOM della pagina, altrimenti l'alert non restituirà alcun risultato.

WmbertSea · 8 Apr 2015

Il problema è che lo script viene eseguito prima che il DOM sia pronto, cioè prima che siano stati creati tutti gli elementi nel resto del documento. Infatti, man mano che la pagina viene caricata, lo script (contenuto nel tuo file prova2.js) viene incluso ed eseguito nell'head del documento, quando l'elemento body (e tutto ciò che contiene) non è ancora stato creato.

Capisci bene che la funzione getElementById non potrà trovare nessun elemento, pertanto restituirà un valore nullo.
Se controlli nella console web del tuo browser, verrà segnalato un errore del tipo: "target" is null.
Questo perché, nel tuo alert, stai tentando di accedere ad una proprietà di un elemento null (il quale non ha proprietà).

Per tale motivo ti ho indicato:

Inoltre accertati che l'elemento sia stato creato sul DOM della pagina, altrimenti l'alert non restituirà alcun risultato.

Per risolvere puoi fare in vari modi.

Una soluzione può essere quella di usare il gestore di evento onload dell'oggetto window. Tale gestore è legato all'evento load che, in linea di massima, si verifica quando l'intero documento è stato caricato ed è pronto per essere manipolato.

Quindi il tuo script sarà una cosa del genere:

Codice:

window.onload = function(){
  var target = document.getElementById("berenger");
  alert(target.nodeName);
}

Un'altra soluzione, senza aggiungere niente allo script, è quella di spostare, alla fine del body, la riga di inclusione dello script. In questo modo il browser è costretto a leggere lo script dopo che avrà già creato tutto il contenuto del body.

Quindi:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Prova Javascript</title>
  </head>
  <body>
    <h1>One Shot One Kill. A colpo sicuro (1993)</h1>
    <p>In questo capolavoro cinematografico, <a id="berenger" href="/name/nm0000297/">Tom Berenger</a>
      interpreta un soldato americano nella jungla panamense.
    </p>
    
    <!-- qui l'inclusione del javascript -->
    <script type="text/javascript" src="prova2.js"></script>
  </body>
</html>

Ci sono sicuramente altre soluzioni ma per il momento credo sia sufficiente, per te, sapere quanto indicato qui.

mickey123 · 8 Apr 2015

Ok, funziona

grazie!
Quando dici, "il problema è che lo script viene eseguito prima che il DOM sia pronto" , intendi che lo script cerca il nodo dell'elemento con id "berenger" , prima che venga creato (con il caricamento della pagina) l'albero dei nodi DOM, dove c'è quindi quell'elemento con quell'id, è corretto?

WmbertSea ha scritto:
Il problema è che lo script viene eseguito prima che il DOM sia pronto, cioè prima che siano stati creati tutti gli elementi nel resto del documento. Infatti, man mano che la pagina viene caricata, lo script (contenuto nel tuo file prova2.js) viene incluso ed eseguito nell'head del documento, quando l'elemento body (e tutto ciò che contiene) non è ancora stato creato.

Capisci bene che la funzione getElementById non potrà trovare nessun elemento, pertanto restituirà un valore nullo.
Se controlli nella console web del tuo browser, verrà segnalato un errore del tipo: "target" is null.
Questo perché, nel tuo alert, stai tentando di accedere ad una proprietà di un elemento null (il quale non ha proprietà).

Per tale motivo ti ho indicato:

Per risolvere puoi fare in vari modi.

Una soluzione può essere quella di usare il gestore di evento onload dell'oggetto window. Tale gestore è legato all'evento load che, in linea di massima, si verifica quando l'intero documento è stato caricato ed è pronto per essere manipolato.

Quindi il tuo script sarà una cosa del genere:

Codice:

window.onload = function(){ var target = document.getElementById("berenger"); alert(target.nodeName); }

Un'altra soluzione, senza aggiungere niente allo script, è quella di spostare, alla fine del body, la riga di inclusione dello script. In questo modo il browser è costretto a leggere lo script dopo che avrà già creato tutto il contenuto del body.

Quindi:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Prova Javascript</title> </head> <body> <h1>One Shot One Kill. A colpo sicuro (1993)</h1> <p>In questo capolavoro cinematografico, <a id="berenger" href="/name/nm0000297/">Tom Berenger</a> interpreta un soldato americano nella jungla panamense. </p>  <script type="text/javascript" src="prova2.js"></script> </body> </html>

Ci sono sicuramente altre soluzioni ma per il momento credo sia sufficiente, per te, sapere quanto indicato qui.

WmbertSea · 8 Apr 2015

Bene.

Quando dici, "il problema è che lo script viene eseguito prima che il DOM sia pronto" , intendi che lo script cerca il nodo dell'elemento con id "berenger" , prima che venga creato (con il caricamento della pagina) l'albero dei nodi DOM, dove c'è quindi quell'elemento con quell'id, è corretto?

Esatto. Teoricamente quello specifico script, perché funzioni, è sufficiente inserirlo subito dopo l'elemento in questione. Quest'ultimo infatti risulterebbe già creato/esistente/disponibile e manipolabile attraverso lo script che viene eseguito subito dopo.
La prassi comune è, comunque, quella di inserire lo script (o gli eventuali script) in fondo al body, così da essere sicuri che tutti gli elementi siano disponibili.

PS: ti prego, non rispondere citando l'intero post quando non è necessario. Grazie.

Cerca

Cerca

Problema con getElementById

mickey123

Utente Attivo

WmbertSea

Moderatore

mickey123

Utente Attivo

WmbertSea

Moderatore

mickey123

Utente Attivo

WmbertSea

Moderatore

Discussioni simili