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.


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.

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

Autore dell'articolo: Cristina

Avatar per Coding Creativo

2 commenti su “Metodo getElementById()

    Avatar per Guzzi Raffaele

    Guzzi Raffaele

    (5 Novembre 2020 - 23:14)

    Salve, ho provato l’esempio del calcolo dell’area, inserendo il codice html in una pagina ‘index’ di un compilatore javascript e lo script in una pagina che ho chiamato ‘variabile’, nella pagina web si vedono le due caselle label di base e altezza e il pulsante, ma non il pulsante non si attiva e non compare il risultato, cosa non funziona ? Grazie per l’eventuale risposta. rguzzi75@gmail.com

      Avatar per Cristina

      Cristina

      (20 Novembre 2020 - 20:33)

      Deve collegare nella pagina html il file javascript.
      Supponendo che il file si chiami script.js deve inserire qualcosa del tipo:
      < script type="text/javascript" src="script.js">< /script>

      Può seguire questo breve tutorial
      https://www.codingcreativo.it/tutorial-javascript/

Lascia un commento

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