Ciao a tutti
Sono veramente alle prime armi. Sto provando a fare una specie di web app (file:///C:/Users/monto/OneDrive/Desktop/javascript/PKG/PKG.html) per calcolare il prezzo al chilo dei prodotti in vendita: digiti il peso in grammi o kg nel campo PESO, digiti il prezzo del prodotto nel campo € e dovrebbe restituire il prezzo al kg nel campo RISULTATO.
Più o meno funziona ma ho due problemi:
1.
La funzione per rendere attivo il campo € richiamata dal button € funziona solo la prima volta.
Sotto riporto il codice completo, perchè non saprei che parte estrapolare, potreste aiutarmi??
Grazie mille
2.
uno grafico (so che non è la sezione giusta, poi chiederò nel luogo appropriato)
Codice:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' >
<title>Calcola il Prezzo al Chilo</title>
<style type="text/css">
body{font-family: verdana;width: 320px; margin: auto; background-color: #15172b;}
div {border:1px solid grey;display:inline-block;background-color:#e1e;height:2em;line-height:2em;padding:5px;}
table {width: 99%}
input {width: 100%;height:3em;font-size:16px;}
button {width: 100%;height:3em;font-size:16px;}
span {width: 10%}
<!-- commento
.form {
background-color: #15172b;
border-radius: 10px;
box-sizing: border-box;
height: 900px;
padding: 20px;
width: 95%;
}
-->
.input {
background-color: #303245;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
font-size: 20px;
height: 3em;
outline: 0;
padding: 4px 20px 0;
width: 11em;
text-align:right;
}
.simboli {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
font-size: 20px;
height: 3em;
outline: 0;
padding: 4px 20px 0;
width: 4em;
text-align:left;
background-color:#e1e
}
.tasto {
background-color: #00A1F1;
border-radius: 5px;
border: 0;
box-sizing: border-box;
color: #eee;
font-size: 22px;
font-weight: bold;
height: 3em;
outline: 0;
padding: 4px 20px 0;
width: 4.4em;
text-align:left;
}
.tasto:active {
background-color: #0F7DC2;
}
.KG{
background-color: #7CBB00;
}
.KG:active {
background-color: #6b9d07;
}
.Gr{
background-color: #e3a21a;
}
.Gr:active{
background-color: #b1821b;
}
.Euro{
background-color: #da532c;
}
.Euro:active{
background-color: #af3412;
}
.Risultati{
background-color: #4040a1;
}
</style>
</head>
<body>
<center><br>
<!--
<p style="color: white;">Calcolo il prezzo al chilo</p>
-->
<div class="input" id="campo_peso">0,00</div><div id="simbolo_peso" class="simboli KG">KG</div><br><br>
<div class="input" id="campo_euro">0,00</div><div id="simbolo_euro" class="simboli Euro">€</div><br><br>
<div class="input" id="risultato" type="text">0,00</div><div id="simbolo_euro_al_chilo" class="simboli Risultati">€/KG</div><br><br>
<center>
<table id="calc">
<tr><td> </td></tr>
<tr>
<td><input class="tasto blu" type="button" value="7" onclick="dig(7);"></td>
<td><input class="tasto blu" type="button" value="8" onclick="dig(8);"></td>
<td><input class="tasto blu" type="button" value="9" onclick="dig(9);"></td>
</tr>
<tr>
<td><input class="tasto" type="button" value="4" onclick="dig(4);"></td>
<td><input class="tasto" type="button" value="5" onclick="dig(5);"></td>
<td><input class="tasto" type="button" value="6" onclick="dig(6);"></td>
</tr>
<tr>
<td><input class="tasto" type="button" value="1" onclick="dig(1);"></td>
<td><input class="tasto" type="button" value="2" onclick="dig(2);"></td>
<td><input class="tasto" type="button" value="3" onclick="dig(3);"></td>
</tr>
<tr>
<td><input class="tasto" type="button" value="," onclick="virgola();" ></td>
<td><input class="tasto" type="button" value="0" onclick="dig(0);"></td>
<td><input class="tasto" type="button" value="C"onclick="canc();"></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><button class="KG tasto" onclick="chili()">KG</button></td>
<td><button class="tasto Gr" onclick="grammi()">Gr</button></td>
<td><button class="tasto Euro" onclick="euro()">€</button></td>
</tr>
</table>
</center>
<script type="text/javascript">
let campo_attivo = 1;
let unita_di_peso = "KG";
let parte_intera = 0;
let parte_decimale = 0;
let peso = 0;
let prezzo = 0;
let risultato = 0;
let decimale = 0;
let display ="";
function stampa() {
if (campo_attivo == 1){
peso = numero_attivo;
document.getElementById("campo_peso").innerHTML = display;
}
else if (campo_attivo == 2){
prezzo = numero_attivo;
document.getElementById("campo_euro").innerHTML = display;}
calcola();
}
function dig(digitato) {
if (decimale == 0) {
parte_intera = (parte_intera*10)+digitato;
numero_attivo = parte_intera;
display = parte_intera;
}
else if (decimale == 1) {
parte_decimale = (parte_decimale*10)+digitato;
numero_attivo = (parte_intera * 100) + parte_decimale;
display = parte_intera + "," + parte_decimale;
}
stampa();
}
function virgola() {
if (decimale == 0) {
decimale = 1;
display = parte_intera + ",";
}
stampa();
calcola();
}
function azzera_valori() {
parte_intera = 0;
parte_decimale = 0;
decimale = 0;
numero_attivo = 0;
display = "";
risultato = 0;
}
function canc() {
azzera_valori ();
peso = 0;
prezzo = 0;
document.getElementById("campo_peso").innerHTML="";
document.getElementById("campo_euro").innerHTML="";
document.getElementById("risultato").innerHTML="";
}
function chili() {
document.getElementById("simbolo_peso").innerHTML="KG";
document.getElementById("simbolo_euro_al_chilo").innerHTML="€/KG";
document.getElementById("campo_peso").innerHTML=" ";
document.getElementById("simbolo_peso").className = "simboli KG";
document.getElementById("risultato").innerHTML=" ";
peso = 0;
unita_di_peso = "KG";
campo_attivo = 1;
azzera_valori ();
}
function grammi() {
document.getElementById("simbolo_peso").innerHTML="Gr";
document.getElementById("campo_peso").innerHTML=" ";
document.getElementById("simbolo_peso").className = "simboli Gr";
document.getElementById("risultato").innerHTML=" ";
peso = 0;
unita_di_peso = "Gr";
campo_attivo = 1;
azzera_valori ();
}
function euro() {
document.getElementById("campo_euro").innerHTML=" ";
document.getElementById("risultato").innerHTML=" ";
euro = 0;
campo_attivo = 2;
azzera_valori ();
window.alert('euro function');//werifica
}
function calcola() {
if (unita_di_peso == "KG"){var_Risultato = prezzo/peso;}
else if (unita_di_peso == "Gr"){var_Risultato = Math.round((prezzo/peso)*1000);}
if (var_Risultato == false) {var_Risultato ="0,00";}
document.getElementById("risultato").innerHTML = var_Risultato;
}
</script>
</center>
</body>
</html>