JavaScript getElementById

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

Come utilizzare il metodo JavaScript 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 JavaScript 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 dunque l’esempio di ciò che vogliamo realizzare. Premete il pulsante sotto, per vedere cambiare il testo.

Coding Creativo

Il codice html che mi servirà sarà 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() utilizziamo 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 adesso un altro esempio di utilizzo del metodo getElementById().

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

Ecco dunque 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>