Trasformare stringhe in numeri decimali e sommarli

**otello** · 02-08-2021, 19:00

Buonasera a tutti,
ho difficoltà con javascript del quale conosco davvero poco.
Il quesito è: in una form php ho più campi nei quali vengono digitati dei valori sotto la forma xx,xx.
Ho bisogno di calcolare in Javascript la somma di questi valori.
Dato che i valori contengono una virgola, ho pensato di trasformarli in decimali puri e poi sommarli restituendo il valore della somma in un campo "spesarich" della form.
La mia soluzione è stata:

codice:

function calcolaSpesa(){    costo1 = document.getElementById('costost1').value;
    costo2 = document.getElementById('costost2').value;
    costo3 = document.getElementById('costost3').value;
    costo4 = document.getElementById('costost4').value;
    superficie = document.getElementById('superficie').value;
    costo1= costo1.replace(",",".");
    costo2= costo2.replace(",",".");
    costo3= costo3.replace(",",".");
    costo4= costo4.replace(",",".");
    superficie= superficie.replace(",",".");
    
    var costo1 = parseFloat(costo1).toFixed(2);
    var costo2 = parseFloat(costo2).toFixed(2);    
    var costo3 = parseFloat(costo3).toFixed(2);    
    var costo4 = parseFloat(costo4).toFixed(2);    
    var superficie = parseFloat(superficie).toFixed(2);
    var spesarich = (costo1 + costo2 + costo3 + costo4);


    document.getElementById("spesarich").innerHTML = spesarich;


}

I valori di "costo1...costo4" sono corretti, ma nel campo "spesarich" mi restituisce il valore dei campi (costo1,costo2,costo3,costo4) intesi come stringhe (per esempio se i valori sono 1.00,2.00,3.00,4.00 restituisce 1.002.003.004.00 e non 10.00). Dove sbaglio?

Grazie per l'aiuto

**ciro78** · 02-08-2021, 19:53

Ciao,

codice:

 var costo4 = parseFloat(parseFloat(costo4).toFixed(2));

Il valore di ritorno di toFixed è una stringa.

**ninja72** · 02-08-2021, 20:46

Esempio.

codice:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="number" step="any" min="0" max="99" name="price1" value="1.00">
        <input type="number" step="any" min="0" max="99" name="price2" value="2.00">
        <input type="number" step="any" min="0" max="99" name="price3" value="3.00">
        <input type="number" step="any" min="0" max="99" name="price4" value="4.00">
        <button id="calc" type="calc">Calc</button>
    </form>
    <div id="tot"></div>

    <script src="test.js"></script>
</body>
</html>

codice:

const numbers = document.querySelectorAll('input[type=number]')
const calc = document.getElementById('calc')
const tot = document.getElementById('tot')

calc.addEventListener('click', e => {
    e.preventDefault()
    calcolaSpesa()
})

function calcolaSpesa() {
    const numbersArr = [...numbers].map(e => {
        return parseFloat(e.value)
    }).reduce((acc, value) => {
        return acc + value
    }).toFixed(2)
    tot.textContent = numbersArr
}

**otello** · 03-08-2021, 08:49

Originariamente inviata da ciro78

Ciao,

codice:

 var costo4 = parseFloat(parseFloat(costo4).toFixed(2));

Il valore di ritorno di toFixed è una stringa.

Questa non me l'aspettavo... grazie 1000

Ninja72, mi hai dedicato del tempo prezioso, mi dispiace di non avere le conoscenze adeguate per apprezzare fino in fondo la soluzione che mi proponi. Ma ci proverò.
Grazie anche a te

**alka** · 03-08-2021, 09:49

Originariamente inviata da otello

Questa non me l'aspettavo...

Nell'ambito della programmazione, può succedere di attendersi un comportamento o un risultato diverso da quello effettivo, però è anche possibile determinarlo con sicurezza all'occorrenza, rimuovendo tutti i dubbi e le ambiguità, attraverso la documentazione ufficiale.

Ciao!

**ninja72** · 03-08-2021, 13:47

C'è un errore non voluto sul type del button che è "submit" e non "calc", sorry

codice:

<button id="calc" type="submit">Calc</button>

**otello** · 04-08-2021, 09:07

Originariamente inviata da alka

Nell'ambito della programmazione, può succedere di attendersi un comportamento o un risultato diverso da quello effettivo, però è anche possibile determinarlo con sicurezza all'occorrenza, rimuovendo tutti i dubbi e le ambiguità, attraverso la documentazione ufficiale.

Ciao!

Assolutamente d'accordo con quanto affermi, ma converrai che un metodo, che formatta un numero utilizzando la notazione a virgola fissa, non ti aspetti dia come risultato una stringa. Il fatto è che non mi è sorto proprio il dubbio dal quale potesse scaturire il ricorso alla documentazione.

**LeleFT** · 04-08-2021, 10:10

Originariamente inviata da otello

un metodo, che formatta un numero utilizzando la notazione a virgola fissa, non ti aspetti dia come risultato una stringa.

Mi permetto di intervenire... la parola chiave sta proprio in ciò che hai scritto: "formatta un numero".

Un numero "formattato" è sempre e solo una rappresentazione stringa del suo valore. Un numero, inteso come valore, non ha alcuna "formattazione" (è semplicemente una serie di bit in memoria). Il concetto di numero esula dal come una persona lo possa rappresentare: il fatto di dargli una forma significa esattamente rappresentarlo sottoforma di stringa, quindi avere in mano una stringa.

Ciao.

**otello** · 04-08-2021, 12:31

Originariamente inviata da LeleFT

Mi permetto di intervenire... la parola chiave sta proprio in ciò che hai scritto: "formatta un numero".

Un numero "formattato" è sempre e solo una rappresentazione stringa del suo valore. Un numero, inteso come valore, non ha alcuna "formattazione" (è semplicemente una serie di bit in memoria). Il concetto di numero esula dal come una persona lo possa rappresentare: il fatto di dargli una forma significa esattamente rappresentarlo sottoforma di stringa, quindi avere in mano una stringa.

Ciao.

Credo tu abbia ragione, a volte farei bene a ricordare di essere un matematico "prestato" all'informatica e cercare di approfondire anche le cose che do per scontate

.

Grazie

**alka** · 04-08-2021, 14:59

Originariamente inviata da otello

Il fatto è che non mi è sorto proprio il dubbio dal quale potesse scaturire il ricorso alla documentazione.

Oltre a quanto ha già scritto nel merito LeleFT, il mio era un suggerimento generale: usi una funzione e non ottieni il comportamento che ti aspetti? Senza indugio, vai subito di documentazione!

Discussione: Trasformare stringhe in numeri decimali e sommarli

Strumenti discussione

Ricerca discussione

Visualizza

Trasformare stringhe in numeri decimali e sommarli

Permessi di invio