Ciao a tutti, non riesco a fare questo: Scrivere una funzione javascript che una volta invocata inserisca in un div html tre immagini. Potreste aiutarmi gentilmente? E' molto importante per me.
Ciao a tutti, non riesco a fare questo: Scrivere una funzione javascript che una volta invocata inserisca in un div html tre immagini. Potreste aiutarmi gentilmente? E' molto importante per me.
Non riesci... perché? Cosa non ti è chiaro del procedimento? Cosa hai provato a scrivere? Cosa non capisci?
"Aiutaci ad aiutarti", perché scritto così risulta come una proposizione del problema e una delega ad altri della sua risoluzione.
Se invece è la richiesta di una mano, devi spiegare cosa non riesci a fare nello specifico, altrimenti non è possibile darti indicazioni mirate.
MARCO BREVEGLIERI
Software and Web Developer, Teacher and Consultant
Home | Blog | Delphi Podcast | Twitch | Altro...
Allora io ho provato a scrivere questo codice, però non mi visualizza la foto. Nell'esercizio devono essere tre, ma intanto ho provato con una e non funziona. Non capisco dove sbaglio o se manca qualcosa
<html>
<head>
<title>titolo</title>
<script type="text/javascript">
function immagini(){
var img=window.document.createElement("img");
img.src="foto1.png";
window.document.getElementById("my_div").innerHTML =img;
}
</script>
</head>
<body>
<div id="my_div" align="center"></div>
<input type="button" value="inserisci immagini" onClick="immagini()"/>
</body>
</html>
Innanzitutto, il codice deve essere formattato con l'apposito tasto #.
Il problema risiede nel fatto che stai creando di fatto l'elemento <img> usando la funzione document.createElement(), ma poi la inserisci nel <div> usando innerHTML, che è una proprietà che si aspetta del testo (ossia l'HTML da inserire all'interno), e non l'elemento in sé.
O definisci il markup HTML dell'immagine e usi innerHTML, oppure inserisci l'elemento <img> che hai creato tramite la funzione appendChild() del <div>, che inserisce l'elemento come "figlio":
Leggi la documentazione collegata alle funzioni per ulteriori approfondimenti ed esempi.codice:var img = window.document.createElement("img"); window.document.getElementById("my_div").appendChild(img);
MARCO BREVEGLIERI
Software and Web Developer, Teacher and Consultant
Home | Blog | Delphi Podcast | Twitch | Altro...
Perfetto, adesso funziona, ma come posso fare per inserire anche le altre foto? perchè se inserisco la seconda in pratica non visualizzo più la prima.
<html>
<head>
<title>titolo</title>
<script type="text/javascript">
function immagini(){
var img=window.document.createElement("img");
img.src="foto1.png";
window.document.getElementById("my_div").appendChi ld(img);
var img1=window.document.createElement("img");
img.src="foto2.jpg";
window.document.getElementById("my_div").appendChi ld(img);
}
</script>
</head>
<body>
<div id="my_div" align="center"></div>
<input type="button" value="inserisci immagini" onClick="immagini()"/>
</body>
</html>
Ultima modifica di maricb; 22-04-2024 a 12:27
L'errore appare evidente anche solo leggendo il codice e dicendo "ad alta voce" quello che fa.
In particolare, guarda bene queste due istruzioni:
La seconda riga ti sembra "congrua" con la prima?codice:var img1 = window.document.createElement("img"); img.src = "foto2.jpg";
In linea generale, sono errori legati alla programmazione in sé, ovvero ai rudimenti che si dovrebbero acquisire documentandosi e iniziando a studiare JavaScript e la programmazione nel browser, come l'uso delle variabili e le funzioni principali del DOM: senza aver chiaro questi aspetti, è inutile proseguire con cose più complesse, andando a tentoni.
MARCO BREVEGLIERI
Software and Web Developer, Teacher and Consultant
Home | Blog | Delphi Podcast | Twitch | Altro...
Grazie, ho risolto.