Problema javascript aiuto

di
reggioboy
il
3 risposte
R
reggioboy
Utente Attivo
Iscritto da
mar, 2020
Messaggi:
52

Problema javascript aiuto

Buongiorno scusatemi siccome sto impazzendo mi potete dire in questo codice dove sbaglio l'html è perfetto appena premo il bottone in invia il codice javascript non viene eseguito, i campi di input nel codice html li posso mettere all'interno di un form anche se non si devono inviare a nessuno devo fare solo dei calcoli in javascript semplicissimi. 

<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Contabilità</title>
  </head>
  <body style="background-image: url(matrix-3109378_1920.jpg);">
    <div class="container mt-5 pt-2 text-white" style="background-color: green;">
        
                <h1 class="display-4">Contabilità Familiare Mensile</h1>

            
           <div class="container "></div>
          
           
              <h3 class="ml-1">Bollette</h3> <input type="text" id="bollette" placeholder="Importo mensile bollette" required><br>
                 
                 <h3 class="ml-1">Benzina</h3>  <input type="text" id="benzina" placeholder="Importo mensile benzina" required><br>
                  
                 <h3 class="ml-1">Spesa Alimentare</h3> <input type="text" id="spesa" placeholder="Importo mensile spesa alimentare" required><br>
                 
                 <h3 class="ml-1">Farmacia</h3> <input type="text" id="farmacia" placeholder="Importo mensile farmaci" required><br>
                 <h3 class="ml-1">Spese Extra</h3> <input type="text" id="altreSpese" placeholder="Importo mensile spese extra" required><br>
                 <h3 class="ml-1">Stipendio Mensile</h3> <input type="text" id="stipendio" placeholder="Inserire  importo stipendio mensile" required><br>
                 
                 <input type="button"  onclick="contab()" value="Invia" >
                 <p id="area"></p>
                <input type="reset"  value="Cancella">
                 
             
              
              
            </div>
        </div>

    </div>
    <script>
      function contab(){
      var x=document.getElementById("bollette").value;
      var y=document.getElementById("benzina").value;
      var z=document.getElementById("spesa").value; 
      var f=document.getElementById("farmacia").value;
      var s=document.getElementById("altreSpese").value;
      var t=document.getElementById("stipendio").value;
      var ris=x+y+z+f+s-t;
      if (ris<0)
      document.getElementById("area").value=" grazie"+ris;
    
      else 
      document.getElementById("area").value= "hello"+ris;
    
  }
     
   

    </script>
   

   
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
     </body>

3 Risposte

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Problema javascript aiuto

    reggioboy ha scritto:

    mi potete dire in questo codice dove sbaglio
    La proprietà value che ti restituisce il valore dei campi ottenuti tramite document.getElementById() è di tipo String: se non fai una conversione un valore intero prima di eseguire la somma, ciò che otterrai sarà solo una concatenazione dei campi e non il risultato che desideri, e anche i successivi confronti non andranno ovviamente a buon fine.
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Problema javascript aiuto

    Prova con le seguenti modifiche :
    
<!doctype html>
<html lang="it">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <title>Contabilità</title>
</head>

<body style="background-image: url(matrix-3109378_1920.jpg);">
    <div class="container mt-3 mb-3 pt-3 pb-3 text-white" style="background-color: green;">
        <form>
            <h1 class="display-4">Contabilità Familiare Mensile</h1>
            <h3 class="ml-1">Bollette</h3>
            <input type="number" id="bollette" class="uscite" placeholder="Importo mensile bollette" value=0
                required><br>
            <h3 class="ml-1">Benzina</h3>
            <input type="number" id="benzina" class="uscite" placeholder="Importo mensile benzina" value=0 required><br>
            <h3 class="ml-1">Spesa Alimentare</h3>
            <input type="number" id="spesa" class="uscite" placeholder="Importo mensile spesa alimentare" value=0
                required><br>
            <h3 class="ml-1">Farmacia</h3>
            <input type="number" id="farmacia" class="uscite" placeholder="Importo mensile farmaci" value=0
                required><br>
            <h3 class="ml-1">Spese Extra</h3>
            <input type="number" id="altreSpese" class="uscite" placeholder="Importo mensile spese extra" value=0
                required><br>
            <h3 class="ml-1">Stipendio Mensile</h3>
            <input type="number" id="stipendio" placeholder="Inserire importo stipendio mensile" value=0 required><br>
            <div class="d-flex mt-2">
                <input type="button" onclick="contab()" value="Calcola">
                <input type="reset" value="Cancella">
            </div>
            <div id="saldoBg" class="d-flex mt-2 w-25 border border-1">
                <h3 class="ml-1 mr-1">Saldo : </h3>
                <span id="saldo" class="h3">0</span>
            </div>
        </form>
    </div>

    <script>
        const entrate = document.getElementById('stipendio')
        const uscite = document.getElementsByClassName('uscite')
        const saldo = document.getElementById("saldo")
        const saldoBg = document.getElementById("saldoBg")

        function contab() {
            let totUscite = 0
            Array.from(uscite).forEach(uscita => {
                return totUscite += uscita.valueAsNumber
            })
            saldo.innerHTML = new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR' })
                .format(entrate.valueAsNumber - totUscite)
            if (parseInt(saldo.textContent) < 0) {
                saldoBg.style.backgroundColor = 'red'
            } else {
                saldoBg.style.backgroundColor = 'green'
            }
        }

    </script>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>
</body>
  • R
    reggioboy
    Utente Attivo
    Iscritto da
    mar, 2020
    Messaggi:
    52

    Re: Problema javascript aiuto

    Ho risolto grazie
Devi accedere o registrarti per scrivere nel forum
3 risposte