Metodo getElementById() — CodingCreativo

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.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

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() {
  // Recuperiamo i valori della base e dell'altezza dall'input
  const b = parseFloat(document.getElementById("base").value);
  const h = parseFloat(document.getElementById("altezza").value);

  // Calcoliamo l'area del rettangolo
  const A = b * h;

  // Mostriamo il risultato nell'input "area"
  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() {
  // Recuperiamo il valore decimale dall'input e lo convertiamo in numero
  let n = parseInt(document.getElementById("decimale").value);
  let binario = "";

  // Ciclo per calcolare il numero binario
  while (n != 0) {
    const resto = n % 2; 
    n = (n - resto) / 2; 
    binario = resto + binario;
  }

  // Mostriamo il risultato
  document.getElementById("risultato").innerHTML = "Il numero binario è: " + binario;
}

function dOttale() { 
  let n = parseInt(document.getElementById("decimale").value);
  let ottale = ""; 

  while (n != 0) {
    const resto = n % 8; 
    n = (n - resto) / 8;
    ottale = resto + ottale;
  }

  document.getElementById("risultato").innerHTML = "Il numero ottale è: " + ottale;
}

function dEsa() {
  let n = parseInt(document.getElementById("decimale").value);
  let esa = ""; 
  const A = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];

  while (n != 0) { 
    let resto = n % 16; 
    n = (n - resto) / 16; 
    if (resto > 9) resto = A[resto]; 
    esa = resto + esa;
  }

  document.getElementById("risultato").innerHTML = "Il numero esadecimale è: " + esa;
}
</script>

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

Lezione precedente: approfondimenti metodo getElementById

Lezione successiva: counter JavaScript