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
Come trovare immagini per il sito web
Quali colori scegliere per un sito web
Quali font scegliere per un sito web
Collegamenti interni ad una pagina web
2 commenti su “Metodo getElementById()”
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
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/