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:

Converti in binario Converti in ottale Converti in esadecimale

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.

Alcuni link utili

Indice argomenti diagramma a blocchi

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