JavaScript getElementById

Oggi parleremo di javascript getElementById, ovvero introduciamo questo utilissimo metodo per operare sul DOM della pagina.


Come utilizzare il metodo getElementById()

Il metodo getElementById() dell’oggetto document, restituisce l’elemento della pagina HTML, avente l’id uguale a ciò che è specificato tra parentesi.

document.getElementById(“#id“)

Ricordiamo, quando abbiamo studiato i selettori nei CSS, che gli id devono essere univoci.

Inoltre è case sensitive, quindi attenzione perchè ad esempio:

document.getElementById(“Testo”) è diverso da

document.getElementById(“testo”)


Facciamo un esempio di utilizzo di getElementById()

Creiamo un div nella pagina web e decidiamo di voler cambiare il testo contenuto al suo interno, dopo aver premuto il pulsante posizionato sotto il livello div.

Ecco l’esempio di ciò che vogliamo realizzare. Premete il pusante sotto, per vedere cambiare il testo.

Coding Creativo

Il codice html che mi servirà sara dunque questo:

<div id="testo">Coding Creativo</div>
<button onclick="cambiaTesto('www.codingcreativo.it');">Cambia testo</button>	

Inserisco un div a cui assegno come id il nome testo e un pulsante, utilizzando il tag <button>, che quando verrà premuto (onclick) attiverà il cambio del testo.

Io ho impostato l’id in un tag <div>, ma l’id poteva essere attribuito ad esempio anche all’interno del tag <p>.


Adesso sviluppiamo il codice javascript.

Per realizzare l’esempio, oltre al metodo getElementById() devo utilizzare anche la proprietà innerHTML, che serve a personalizzare il contenuto di un oggetto. Ad esempio per modificare o aggiungere del testo, come nel nostro caso.

<script type="text/javascript">
function cambiaTesto(newTesto) { //funzione che attiva il cambio del testo
  document.getElementById("testo").innerHTML =newTesto;
}
</script>


Esempio2 di utilizzo di getElementById()

Facciamo un altro esempio di utilizzo del metodo getElementById().

Vogliamo creare un pulsante, che cambia il colore della scritta contenuta in un div. Anzi poniamo tre possibilità di colore.

Ecco l’esempio. Provate a cliccare sui vari pulsanti.

Coding Creativo


Inserisco il div a cui assegno l’id colore che poi vado a richiamare con getElementById(‘colore’).

Creo quindi tre semplici pulsanti utilizzando il tag <button> e a ciascuno all’interno dell’evento onclick assegno la procedura cambiaColore().

<div id="colore">Coding Creativo</div>
<button onclick="cambiaColore('#ff00ff');">Magenta</button>
<button onclick="cambiaColore('#f56f00');">Arancione</button>
<button onclick="cambiaColore('#00ff00');">Verde</button>	

In javascript utilizzo la proprietà elem.style.color per far cambiare colore al paragrafo.

<script type="text/javascript">
function cambiaColore(newColor) {
  var elem = document.getElementById('colore');
  elem.style.color = newColor;

}
</script> 

Alcuni link utili:

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web


Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *