Calcolo valore alla pressione di un pulsante

**GamingAlex** · 07-02-2017, 16:52

Ciao a tutti, sono nuovissimo sul forum ma sono sicuro che qua è pieno di gente molto più brave di me in HTML e Javascript. Praticamente ho provato a creare questo script. Voglio che si inseriscono un input litri e percentuale, quando si preme il bottone invece compare sotto (variabile in grassetto) quanti ml servono in x litri. Però non funziona cosa ho sbagliato?

codice:

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MiscelaCalc</title>
    <h1 style=color:red>Miscela<span style= color:black>Calc</span>
    </h1>
    
    <style>
    body {background-color:orange}
    
    .button {
    background-color:#4CAF50;
    border: none;
    padding: 15px 32px;
    color: white
    }
    </style>
    
    
   
</head>
<body>
<h3>Inserisci qui la quantità di litri:</h3>
<input id="litri" type=number>

<h3>Inserisci ora la percentuale:</h3>
<input id="percentuale" type=number><br>
<br>
<button class="button" onclick="funzione()"><b>CLICCA QUI</b></button>

    <script>
    var litri = document.getElementById(litri).value.bold()
    
    var percentuale= document.getElementById(percentuale)+"%".value.bold()    
    var conto = litri*percentuale*10 + "ml".bold()
    
    function funzione() {
    document.write("Perfetto,in "+litri+" litri per avere una miscela al "+percentuale+" bisogna aggiungere "+conto+" di olio."
  }  
    </script>
</body>
</html>

GRAZIE a tutti in anticipo

**KillerWorm** · 07-02-2017, 18:04

Ciao e benvenuto. L'argomento mi pare attinente al forum Javascript, più che ad HTML5. Ho segnalato la discussione, nel caso sarà spostata dal moderatore.
Occhio anche al regolamento di sezione (post in evidenza) riguardo i titoli generici.

Tieni inoltre presente che le richieste di risoluzione di esercizi scolastici, non sono ben viste qui sul forum .

Ad ogni modo personalmente posso dirti che noto diversi errori abbastanza grossolani sul codice che hai postato.
Posso giusto darti qualche dritta per poter andare avanti da te stesso.

Nel codice Javascript ci sono degli errori di sintassi che puoi verificare attraverso la console web e relativi gli strumenti di sviluppo del tuo stesso browser.

Lancia quindi la pagina sul browser e apri la console web premendo F12 da tastiera, o altre combinazioni di tasti a seconda del browser o, ancora, attraverso il menu. Eventualmente basta una ricerca .. vedi qui ad esempio

Nella console, a seconda del browser, dovrai attivare, se non lo è, la registrazione JavaScript attraverso il relativo pulsante "JS".

Eventualmente aggiorna la pagina per vedere gli eventuali errori e messaggi nel log della console.

Puoi partire da qui per verificare gli errori sul codice e correggerli man mano. La maggior parte degli errori sintattici puoi risolverli facilmente anche eseguendo eventuali opportune ricerche sul web o qui sul forum. Se poi non riesci a risolvere dopo aver provato, puoi sempre postare le tue richieste per quelle specifiche difficoltà che incontri.

Se invece vuoi che qualcuno ti risolva l'esercizio, mi sa che sei nel posto sbagliato.

Buon lavoro e buona permanenza sul forum

**GamingAlex** · 07-02-2017, 19:03

Non è affatto un esercizio scolastico, ma comunque mi scuso per aver sbagliato argomento. Ma non capivo bene se metterlo in Html o Js. Ma comunque grazie

**KillerWorm** · 07-02-2017, 19:16

Non è affatto un esercizio scolastico

Pardon, errore mio, mi era sembrato

Ad ogni modo il mio consiglio resta tale. Attraverso la console web del tuo browser puoi verificare tu stesso i diversi errori, così da acquisire anche una maggiore esperienza che sicuramente potrà tornarti utile per i tuoi progetti futuri.

**GamingAlex** · 07-02-2017, 21:02

Ok grazie mille, ho quasi risolto. Insomma ora lo script in se funziona. Ma voglio fare in modo che se la var litri è uguale a 1 allora deve stampare "litro". Quindi ho usato if... Ma evidentemente devo fare qualcos'altro perché rimane sempre "litri"

codice:

<script>
    function myFunction() {
    var litri = document.getElementById("litri").value
    
    var percentuale= document.getElementById("percentuale").value  
    var conto = litri*percentuale*10 + " ml"
 
    document.getElementById("finale").innerHTML = "Perfetto, in "+litri.bold().fontsize(7)+" litri per avere una miscela al "+percentuale.bold().fontsize(7)+" % bisogna aggiungere "+conto.bold().fontsize(7)+" di olio.";
    
    if(litri == 1){
        document.getElementById("finale").innerHTML = "Perfetto, in "+litro.bold().fontsize(7)+" litro per avere una miscela al "+percentuale.bold().fontsize(7)+" % bisogna aggiungere "+conto.bold().fontsize(7)+" di olio.";
    }
  }  
    </script>

Okay, penso di aver risolto... Errore banale, ho cambiato il nome della variabile così a caso nel if.
Come non detto ahah

**KillerWorm** · 08-02-2017, 17:23

voglio fare in modo che se la var litri è uguale a 1 allora deve stampare "litro". Quindi ho usato if...

Ho visto che hai risolto ma se posso darti un consiglio:
in questo caso, più che un if strutturato in quel modo, potrebbe risultare più pratico e "pulito" l'utilizzo di un operatore condizionale ternario.

Una cosa del genere:

codice:

function myFunction() {
  var litri = document.getElementById("litri").value

  var percentuale= document.getElementById("percentuale").value  
  var conto = litri*percentuale*10 + " ml"

   document.getElementById("finale").innerHTML = "Perfetto, in  "+litri.bold().fontsize(7)+" litr"+(litri==1 ? "o" : "i")+" per avere  una miscela al "+percentuale.bold().fontsize(7)+" % bisogna aggiungere  "+conto.bold().fontsize(7)+" di olio.";
}

In particolare vedi la parte in cui ho inserito tale operatore:

codice:

" litr"+(litri==1 ? "o" : "i")

In questo modo eviti la ridondanza del codice, cioè non servirà riscrivere l'intera riga, dove costruisci la frase, per variare giusto una parola o una lettera.

**GamingAlex** · 08-02-2017, 20:19

Wow, grazie mille si può dire che ho scoperto l'acqua calda ma non lo sapevo. Mi sono fatto una bella lettura e diciamo che è molto più comodo e intuitivo del if:
Praticamente ho sostituito l'intero script così

codice:

    if(!litri || !percentuale || percentuale>100 || percentuale<=0 || litri<=0){
        alert("Inserisci un valore valido");
    }else{
    
    document.getElementById("finale").innerHTML = "Perfetto, in "+litri.bold().fontsize(7)+" litr"+(litri==1? "o" : "i")+ " per avere una miscela al "+percentuale.bold().fontsize(7)+" % bisogna aggiungere "+conto.bold().fontsize(7)+" di olio.";
    }

In modo che se i valori non sono validi allora non deve stampare nulla, grazie ancora

**ciro78** · 08-02-2017, 21:17

Ciao Gaming
benvenuto sul forum. Prima di lodare gli utenti leggi il regolamento con attenzione. Ho modificato il titolo che non era conforme al regolamento.

**GamingAlex** · 08-02-2017, 23:32

Chiedo scusa

Ora mi rileggo bene il regolamento.
Comunque ora ho provato un po' a sviluppare il "ternary" in una variabile, il mio intendo è quello di aggiungere tra parentesi (solo se i ml sono maggiori di mille) il valore in Litri, quindi ho provato con:

codice:

var conto = litri*percentuale*10 + " ml" ;
    conto=conto+(conto >= 1000 ? " (L)" : "");

Ci provo da oggi ahah, più che altro dovrei ringraziarvi per la pazienza

Edit*
Ok sono riuscito in qualche modo, nemmeno mi ricordo da quanto ci sono stato dietro, prima facevo l'errore di dividere non solo il numero ma anche la stringa "Ml" per questo non veniva:
Ora ho fatto così:

codice:

var percentuale= document.getElementById("percentuale").value  
    var contoGrezzo = litri*percentuale*10;
    var conto = contoGrezzo + " ml " + (contoGrezzo>=1000 ? "("+contoGrezzo/1000+" L)" : "");

Ed effettivamente funziona !

Discussione: Calcolo valore alla pressione di un pulsante

Strumenti discussione

Ricerca discussione

Visualizza

Calcolo valore alla pressione di un pulsante

Permessi di invio