funtion() funziona una volta sola

**colf** · 27-08-2021, 18.20.42

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">&euro;</div><br><br>
<div class="input" id="risultato" type="text">0,00</div><div id="simbolo_euro_al_chilo" class="simboli Risultati">&euro;/KG</div><br><br>

<center>
<table id="calc">
          <tr><td>&nbsp;</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>&nbsp;</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()">&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="&euro;/KG";
                  document.getElementById("campo_peso").innerHTML="&nbsp;";
                  document.getElementById("simbolo_peso").className = "simboli KG";
                  document.getElementById("risultato").innerHTML="&nbsp;";
                  peso = 0;
                  unita_di_peso = "KG";
                  campo_attivo = 1;
  			          azzera_valori ();
				          }


function grammi() {
                  document.getElementById("simbolo_peso").innerHTML="Gr";
                  document.getElementById("campo_peso").innerHTML="&nbsp;";
                  document.getElementById("simbolo_peso").className = "simboli Gr";
                  document.getElementById("risultato").innerHTML="&nbsp;";
                  peso = 0;
                  unita_di_peso = "Gr";
                  campo_attivo = 1;
                  azzera_valori ();
}


function euro() {
				          document.getElementById("campo_euro").innerHTML="&nbsp;";
                  document.getElementById("risultato").innerHTML="&nbsp;";
                  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>

**alemoppo** · 27-08-2021, 20.50.26

Il problema è la riga 234:

Codice:

euro = 0;

Il problema è che l'elemento "euro" è una funzione, poi se assegni 0 diventa una variabile, ed ovviamente non ha senso poi richiamare euro() all'onclick. Commenta quindi la riga 234 (non so quale uso volevi fare della variabile "euro", al più rinominala).

Per i grafici, ci sono delle librerie javascript già pronte, vedi qui.

Ciao!

**colf** · 28-08-2021, 00.09.57

Grazie mille, davvero una enorme grazie e complimenti.

la variabile euro l'avevo prevista inizialmente per effettuare dei calcoli ma poi è risultata inutile. Evidentemente è rimasta li per sbaglio.

Per grafico intendevo che ho un problema grafico e cioè quando i campi di testo restano vuoti (schiacciando il tasto "C") i div colorati con i simboli KG/Gr, € e €/KG si spostano verticalmente.

**alemoppo** · 28-08-2021, 00.31.58

Potresti risolvere modificando la funzione canc in questo modo:

Codice:

document.getElementById("campo_peso").innerHTML="0,00";
document.getElementById("campo_euro").innerHTML="0,00";
document.getElementById("risultato").innerHTML="0,00";

Il problema è che lasciando vuoti i vari campi, il CSS si sfasa.

p.s: il primo errore era facilmente rilevabile utilizzando la console degli sviluppatori (solitamente nei browser è il tasto F12). È (quasi) indispensabile per rilevare gli errori o debuggare. Puoi anche scriverci usando console.log() da javascript.

Ciao!

**prezzialchilo** · 29-08-2021, 12.22.09

Si, l'unica soluzione per evitare il disallineamento dei div è inserire il valore 0,00.

Per il debug, ho usato la console sviluppatori di Chrome, ma evidentemente devo ancora capirla...

Grazie ancora!

**alemoppo** · 29-08-2021, 13.14.15

Dalla console di Chrome, appare:

Quindi da qui ho capito che c'era qualcosa che non andava in "euro", quindi ho ricercato dove/come lo usati e ho visto "euro = 0".

Ciao!

Discussione: funtion() funziona una volta sola

LinkBack

Strumenti discussione

Display

funtion() funziona una volta sola

Regole di scrittura