Metodo getElementById(), esempi con il metodo getElementById

In questa lezione presenterò altri esempi di utilizzo del metodo getElementById(), al fine di comprenderne meglio il funzionamento.

Nell’articolo precedente https://www.codingcreativo.it/javascript-getElementById/ abbiamo già introdotto questo metodo.

Esempio 1 di utilizzo del metodo getElementById()

Realizziamo dunque un primo esempio di utilizzo di getElementById().

Dati in input base e altezza di un rettangolo, calcolarne l’area.

Ecco come dovrebbe apparire l’esempio, inserite la base e l’altezza e poi cliccate sul pulsante calcola area del rettangolo, nel div sotto comparirà il risultato.

Base: Altezza:

Quindi inseriamo il codice html che comprende gli input per permettere l’inserimento della base e dell’altezza e il button dove andare ad inserire l’evento onclick(). Inoltre sotto aggiungiamo il tag div che servirà a visualizzare il risultato dell’area.

<label>Base:</label><input type="text" id="base">
<label>Altezza:</label><input type="text" id="altezza">
<input type="button" onclick="Area()" value="Calcola l'area del rettangolo">
<p><div id="area"></div></p>

Per il codice JavaScript, innanzitutto definiamo la funzione Area() e per ricavare il valore inserito nell’input text useremo getElementById(“id”).value. Infine visualizzeremo il risultato nel div con id=area.

 <script>
 function Area() {
  var b=document.getElementById("base").value;
  var h=document.getElementById("altezza").value;
  var A=b*h;
  document.getElementById("area").value = "L'area del rettangolo è: " + A;
  }
 </script>

Esempio 2 di utilizzo del metodo getElementById()

Facciamo adesso un altro esempio di utilizzo di getElementById(), realizzando un sistema di conversione da decimale a binario, da decimale a ottale e da decimale a esadecimale.

Provate ad inserire nella casella di input un numero decimale e poi cliccate nei pulsanti sotto per fare le relative conversioni.

Numero decimale:

Per realizzare l’esempio creiamo quindi la casella di input e i tre button dove, per ciascun pulsante, nell’evento onclick, inseriremo la funzione inerente per la codifica da effettuare.

<p><label>Numero decimale: </label>
<input type="text" id="decimale"></p>
<button onclick="dBinario()" type="button">Converti in binario</button>
<button onclick="dOttale()" type="button">Converti in ottale</button>
<button onclick="dEsa()" type="button">Converti in esadecimale</button>
<div id="risultato"></div>

Aggiungiamo poi le funzioni in JavaScript per fare le conversioni.

Per la conversione da decimale a binario, prendiamo il numero preso in input e lo dividiamo per due fino ad arrivare a zero, considerando i resti.

Utilizzeremo chiaramente l’operatore modulo % per ottenere i resti.

resto = n%2;

A mano a mano trascriviamo i resti del nostro numero nella variabile binario a sinistra, trovando così il nostro numero.

Facciamo quindi un esempio:

24 diviso 2= 12 resto 0

12 diviso 2= 6 resto 0

6 diviso 2= 3 resto 0

3 diviso 2= 1 resto 1

1 diviso 2=0 resto 1

Partendo dal basso il nostro numero in binario è dunque uguale a 11000.

Facciamo lo stesso ragionamento per la conversione da decimale a ottale, dividendo per 8 fino ad arrivare allo zero e considerando i resti.

Infine faremo la stessa cosa anche per il sistema esadecimale (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) ma se il resto è maggiore di 9 sostituiremo il valore del resto con il valore contenuto nell’array A appositamente creato.

<script type="text/javascript"> 
function dBinario(){
    n = document.getElementById("decimale").value; 
    binario = "";
    while(n!=0) {
      resto = n%2; 
      n = (n-resto)/2; 
      binario = resto + binario;
    }
   document.getElementById("risultato").innerHTML = "il numero: " +   binario;
}

function dOttale(){ 
  n = document.getElementById("decimale").value; 
  ottale = ""; 
  while(n!=0) {
     resto = n%8; 
     n = (n-resto)/8;
     ottale = resto + ottale;
   }
   document.getElementById("risultato").innerHTML = "il numero: " +    ottale;
}

function dEsa() {
   n = document.getElementById("decimale").value;
   esa = ""; 
   while(n!=0) { 
     resto = n%16; 
     n=(n-resto)/16; 
     A = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
     if (resto > 9) 
	   resto = A[resto]; 
      esa = resto + esa;
     }
     document.getElementById("risultato").innerHTML = "il numero: " + esa;
}
</script>

Chiaramente questi sono solo degli esempi di utilizzo del metodo getElementById.

Lezione precedente: introduzione a JavaScript getElementById

Lezione successiva: validare un form in JavaScript