Problèmes simples d'ajout de JavaScript

Question

Je ne suis pas très bon avec JS et pour une raison quelconque, quand j'essaie d'ajouter deux champs ensemble, il les joint plutôt que d'ajouter la somme ensemble .. c'est le code que j'essaie d'utiliser ..

function calculateTotal() { 

     var postageVal = document.getElementById('postage').value; //$68.50 
     var subtotalVal = document.getElementById('subtotal').value; //$378.00 

     var postage = postageVal.substr(1); //68.50 
     var subtotal = subtotalVal.substr(1); //378.00 
     var totalVal = postage+subtotal; 

     alert(postage); 
     alert(subtotal); 
     alert(totalVal); 

    }; 

Le totalVal est l'écho/alerte sur 68.50378.00 plutôt que de les additionner .. quelqu'un pourrait-il s'il vous plaît me dire où je suis allé mal? :(L'idée est de mettre à jour le champ de texte "total" avec totalVal, mais je ne l'ai pas encore obtenu!

Answer 1

Vous devez convertir vos valeurs à un flotteur avant de les ajouter:

var totalVal = parseFloat(postage) + parseFloat(subtotal); 

EDIT: Voici un exemple complet qui comprend un chèque de NaN:

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = parseFloat(postageVal.substr(1)); //68.50 
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00 
    var postageAsFloat = isNaN(postage) ? 0.0 : postage; 
    var subtotalAsFloat = isNaN(subtotal) ? 0.0 : subtotal; 
    var totalVal = postageAsFloat + subtotalAsFloat; 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 2

Je n'ai pas testé votre code donc il y a peut-être d'autres problèmes mais le correctif ci-dessous avec parseFloat devrait s'arrêter la concaténation et ajoutez les chiffres ensemble

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = postageVal.substr(1); //68.50 
    var subtotal = subtotalVal.substr(1); //378.00 
    var totalVal = parseFloat(postage)+parseFloat(subtotal); 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 3

parseFloat fait le tour

var postage = parseFloat(postageVal.substr(1)); 
var subtotal = parseFloat(subtotalVal.substr(1)); 

Answer 4

Essayez de convertir le nombre de flotteurs:..

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = parseFloat(postageVal.substr(1)); //68.50 
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00 
    var totalVal = postage+subtotal; 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 5

Il traite l'affranchissement et le sous-total comme des chaînes et les concaténer. Vous pouvez essayer quelque chose comme ceci:

var totalVal = 0+postage+subtotal; 

Cela devrait le forcer en mode numérique. Toutefois, cela peut entraîner des problèmes si les valeurs ne sont pas des nombres. Vous devriez l'exécuter à travers les fonctions d'analyse syntaxique de nombre correct et ajouter des vérifications pour s'assurer qu'ils analysés correctement, sinon vous finirez avec NaN.

Answer 6

Vous devez analyser le nombre premier. Cela devrait fonctionner.

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = parseFloat(postageVal.substr(1)); //68.50 
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00 
    var totalVal = postage+subtotal; 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 7

Merci pour toutes les réponses! Je vais les essayer, je suis sûr qu'ils sont mieux que ma solution:

<script type="text/javascript"> 
function calculateTotal() { 

    var postageVal = document.cart.postage.value; 
    var subtotalVal = document.cart.subtotal.value; 

    var postage = postageVal.substr(1); 
    var subtotal = subtotalVal.substr(1); 
    var totalVal = Number(postage)+Number(subtotal); 

    document.cart.total.value = "$"+totalVal.toFixed(2); 

}; 
</script> 

Answer 8

Tout le monde a la bonne idée avec parseFloat.

Je voulais juste dire que je préfère nettoyer des valeurs numériques comme celui-ci (par opposition à l'analyse syntaxique avec substr):

var postageVal = document.getElementById('postage').value; //$68.50 

var postage = parseFloat(postageVal.replace(/[^0-9.]/g, '')); 

qui remplacent appel supprime tous les caractères de la chaîne sauf0 -9 et . (période). Pas le /g à la fin de la regex. C'est important car, sans cela, seule la première occurrence correspondante sera remplacée.

Answer 9

Plus unaire devrait fonctionner:

var totalVal = (+postage) + (+subtotal); 

Mais vous avez probablement votre intention d'affranchissement et les variables sous-total pour être des nombres plutôt que des chaînes, alors ...

var postage = +postageVal.substr(1); //68.50 
var subtotal = +subtotalVal.substr(1); //378.00 
var totalVal = postage+subtotal; 

Answer 10

Ayant eu le même genre de problèmes J'ai examiné les fonctions JS parseFloat et parseInt et les ai trouvées très mal développées.

Donc donc j'évite tout le problème en multipliant la valeur de l'élément * 1 avant de les ajouter. Cela force JS à traiter le résultat comme numérique même si les valeurs sont vides, afin qu'il puisse être correctement géré. Comme suit:

var TEMP = (1 * el_1.value) + (1 * el_2.value); 
document.getElementById("el_tot").value = TEMP; 

En supposant que vous voyez que "el_1" et al sont les noms de champ dans le formulaire.

Answer 11

1.Simple javascript programme plus

<!DOCTYPE html> 
<html> 
<body> 
<p>This calculation perfoms an addition, and returns the result by using a  JavaScript.  Check for a demo</p> 
<form> 
Enter no 1:<input type="text" name="a"><br> 
Enter no 2:<input type="text" name="b"><br> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&  nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<button onclick="calc(this.form)">Calculate</button> 
</form> 

<script> 
function calc(form) 
{ 
var a=eval(form.a.value); 
var b=eval(form.b.value); 
var c=a+b; 
alert("The sum is " + c); 
} 
</script> 

</body> 
</html>