input_e_semplici_operazioni

by Pierfrancesco Buonsante

HTML

<div>
<p>Scrivi un numero <input id="numero" type="number"></p>
<p><button type="button" onclick="doppio()">raddoppia</button>  
<button type="button" onclick="triplo()">triplica</button>  
<button type="button"onclick="pulisci()">pulisci</button>
</p>
</div>
<div id='risposta' style='visibility:hidden;'>
Il <span id='operazione'></span> del numero che hai scritto è: <span id='risultato'></span>
</div>

JavaScript

// ============================================================

function doppio(){
// leggo l'input
var n = document.getElementById("numero").value;

// raddoppio l'input
n*=2;
// scrivo il risultato
document.getElementById("risultato").innerHTML=n;
// scrivo l'operazione
document.getElementById("operazione").innerHTML='doppio';
// rendo visibile il la risposta
document.getElementById("risposta").style.visibility='visible';


}

// ============================================================

function triplo(){
// leggo l'input
var n = document.getElementById("numero").value;

// raddoppio l'input
n*=3;
// scrivo il risultato
document.getElementById("risultato").innerHTML=n;
// scrivo l'operazione
document.getElementById("operazione").innerHTML='triplo';
// rendo visibile il la risposta
document.getElementById("risposta").style.visibility='visible';


}

// ============================================================

function pulisci(){
// nascondo la risposta
document.getElementById("risposta").style.visibility='hidden';
// pulisco il riquadro di input
document.getElementById("numero").value='';
// metto il cursore nel riquadro di input
document.getElementById("numero").focus;

}