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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
O problema recupero valore con getElementById Ajax 0
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
N Problema con position absolute e overflow HTML e CSS 4
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
K [PHP] Problema con variabili concatenate. PHP 1
O problema con query PHP 4
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema con eccessiva nitidezza apertura Camera Raw Photoshop 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7
S Problema con mysqli_num_rows PHP 18

Discussioni simili