[JS] Dare un valore ad un div

28-08-2007, 22.22.32

ciao a tt, con l'ispirazione della notte scrivo questo tutorial!
In questo tutorial cercheremo di dare un valore ad un div tramite javascript ad un evento da noi definito.
Per incominciare ci basti sapere che per scrivere su un div basta scrivere:

Codice HTML:

<html>
<head>
<script type="text/Javascript">
function inner() { //nome della funzione
div = document.getElementById('id_del_div'); //definisco l'id del div
div.innerHTML = "NUOVO VALORE DEL DIV"; //inserisco del testo HTML nel div
}
</script>
</head>
<body onload="inner();">
<a href="#" onclick="inner(); return false;">CLICK HERE</a><br />
<div id="id_del_div"></div>
</body>
</html>

Esaminando il codice, tranne che nella parte del JS che ho commentato, noterete che al caricamento della pagina (<body onload) si setterà il valore del div con il nuovo e se si cliccherà su CLICK HERE il div assumerà come per magia

il valore impostato nel JS.
Per farla breve ecco un esempio più pratico e dinamico:

Codice HTML:

<html>
<head>
<script type="text/Javascript">
function inner(id,text) { //nome della funzione
div = document.getElementById(id); //recuperò l'id del div dal nome della funzione
div.innerHTML = text; //inserisco del testo settato nel nome della funzione nel div
}
</script>
</head>
<body>
<a href="#" onclick="inner("prova","ciao, questo è l'effetto prodotto dal javascript: innerHTML"); return false;">CLICK HERE</a><br />
<div id="prova">GUARDA IL VALORE DI QUESTO DIV QUANDO CLICCHI SU CLICK HERE...!</div>
</body>
</html>

Abbastanza commentato...chiudo

ciaoo

FunCool: Ho aggiunto il "return false;" nei link per fare in modo che non venga eseguito il link presente in href. In questo caso la pagina non verrà spostata in alto.

Discussione: [JS] Dare un valore ad un div

LinkBack

Strumenti discussione

Display

[JS] Dare un valore ad un div

Regole di scrittura