Problema con getElementById

mickey123

Utente Attivo
17 Gen 2015
59
0
6
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. :)
 
Ultima modifica di un moderatore:

WmbertSea

Utente Attivo
28 Nov 2014
178
27
28
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

Utente Attivo
17 Gen 2015
59
0
6
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);

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.
 
Ultima modifica di un moderatore:

WmbertSea

Utente Attivo
28 Nov 2014
178
27
28
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

Utente Attivo
17 Gen 2015
59
0
6
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?

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

WmbertSea

Utente Attivo
28 Nov 2014
178
27
28
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.
 
Autore Discussioni simili Forum Risposte Data
R PHP 7
G PHP 4
P PHP 6
P Java 1
O Ajax 0