problema con l'accesso gli elementi del documento tramite javascript

**lomba91** · 27-10-2013, 01:09

buonasera,
innanzitutto ringrazio chiunque legga questo post.
il problema è il seguente: vorrei creare una lista di immagini e l click su una di esse dovrebbe apparire la stessa immagine a tutto schermo, senza usare librerie jquery causa progetto universitario.
allego il codice da me scritto

codice:

//Presentazione Immagini - javascript

var immagini = document.getElementsByTagName("IMG");

var div_grande = document.getElementsByTagName('DIV');
div_grande.style.visibility = "hidden";

var array_img = new Array();

var i = 0;
for(i in immagini) {
    //array_img[i] = immagini[i].src;
    immagini[i].setAttribute("onClick", "ingrandisci(" + i +")");
}

function ingrandisci(index) {
        
    var img_grande = document.createElement("IMG");
    img_grande.setAttribute("src", immagini[index].src);
    
    div_grande[0].appendChild(img_grande);
    div_grande[0].style.visibility = "visible";
}

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML lang="it">
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<TITLE>Immagini</TITLE>
<link href="style.css" rel="stylesheet" type="text/css">
<SCRIPT type="text/javascript" src="presentazione.js"></SCRIPT>
</HEAD>

<BODY>
<DIV id="visualizzatore"></DIV>
<DIV class="conteiner">
<IMG class="elenco_img" src="img/i1.jpg"> 
<IMG class="elenco_img" src="img/i2.jpg">
<IMG class="elenco_img" src="img/i3.jpg"> 
<IMG class="elenco_img" src="img/i4.jpg">
</DIV>
</BODY>
</HTML>

l'idea era quella di creare all'interno del div visualizzatore un nuovo elemento immagine e di farlo comparire a tutto schermo. la chiusura del suddetto oggetto non l'ho ancora gestita m non ha importanza al momento.
quando provo il codice però non succede niente e l'errore sembra esser l'accessoagli elementi tramite i metodi previsti dal DOM, ma non riesco a capire cosa ci sia di sbagliato.

grazie

**lucavizzi** · 27-10-2013, 19:40

Originariamente inviata da lomba91

quando provo il codice però non succede niente e l'errore sembra esser l'accessoagli elementi tramite i metodi previsti dal DOM, ma non riesco a capire cosa ci sia di sbagliato.

Per poter accedere gli elementi del DOM, devi attendere che questi siano effettivamente caricati nella pagina.

codice:

window.onload=function(){
    var immagini = document.getElementsByTagName("img");
    // ecc.
}

O, in alternativa puoi includere il file .js alla fine del documento.

P.S.:
Per referenziare il div che conterrà le foto puoi usare:

codice:

var div_grande=document.getElementById('visualizzatore');

**lomba91** · 03-11-2013, 12:03

grazie mille, non ero a conoscenza di questo:

Per poter accedere gli elementi del DOM, devi attendere che questi siano effettivamente caricati nella pagina.

Prima di utilizzare il metodo tagName ho provato a referenziare il div con l'id ma cosi facendo veniva segnalato l'errore che l'oggetto (div_grande) è vuoto

Discussione: problema con l'accesso gli elementi del documento tramite javascript

Strumenti discussione

Ricerca discussione

Visualizza

problema con l'accesso gli elementi del documento tramite javascript

Permessi di invio