Problemas simples de adición de JavaScript

Question

No soy tan bueno con JS y por alguna razón cuando trato de agregar dos campos juntos, se une a ellos en lugar de agregar la suma juntos ... este es el código que estoy tratando de usar ...

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); 

    }; 

El totalVal se hace eco/alertar a cabo 68.50378.00 en lugar de sumarlos .. podría alguien decirme dónde he ido mal? :(La idea es actualizar el campo de texto "total" con totalVal, pero aún no he llegado tan lejos!

Answer 1

Es necesario para convertir sus valores a un flotador antes de añadirlos:

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

EDIT: He aquí un ejemplo completo que incluye un cheque por 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

No he probado su código, por lo que puede haber otros problemas, pero la solución a continuación usando parseFloat debería detenerse la concatenación y sumar los números

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 hace el truco

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

Answer 4

Intenta convertir los números a los flotadores:..

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

Se trata el franqueo y el subtotal como cadenas y se concatenan. Podría intentar algo como esto:

var totalVal = 0+postage+subtotal; 

Eso debería forzarlo al modo numérico.

Sin embargo, esto podría ocasionar problemas si los valores no terminan siendo números. Debe ejecutarlo a través de las funciones correctas de análisis numérico y agregar comprobaciones para asegurarse de que se analizaron correctamente o de lo contrario terminará con NaN.

Answer 6

Necesitas analizar el número primero. Esto debería funcionar.

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

¡Gracias por todas las respuestas! Voy a probarlos, estoy seguro de que son mejores que mi solución:

<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

Todo el mundo tiene la idea correcta con parseFloat.

Sólo quería mencionar que prefiero para limpiar los valores numéricos como esto (en contraposición a analizar con substr):

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

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

que reemplazan llamada eliminará todos los caracteres de la cadena excepto0 -9 y . (punto). No es el /g al final de la expresión regular. Eso es importante porque, sin él, solo se reemplazará la primera ocurrencia coincidente.

Answer 9

más Unario debería funcionar:

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

Pero es probable que pretendía su franqueo y las variables de subtotales a ser números en lugar de cadenas, así que ...

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

Answer 10

Habiendo obtenido el mismo tipo de problemas Examiné las funciones JS parseFloat y parseInt y las encontré mal desarrolladas.

Por lo tanto, evito todo el problema al multiplicar el valor del elemento * 1 antes de agregarlos. Esto fuerza a JS a tratar el resultado como numérico, incluso si el valor está vacío, para que pueda manejarse adecuadamente. De la siguiente manera:

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

Suponiendo que vea que "el_1" y otros son los nombres de campo en el formulario.

Answer 11

1.simple Javascript Además del programa

<!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>