Question

我对JS不太好，出于某种原因，当我尝试将两个字段添加到一起时，它会加入它们而不是将总和加在一起..这是我正在尝试使用的代码..

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

    };

totalVal回应/警告68.50378.00而不是将它们加在一起..有人可以告诉我哪里出错了吗？ :(想法是用totalVal更新“总”文本字段，但我还没有那么远！

Answer 1

在添加值之前，您需要将值转换为浮点数：

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

编辑：这是一个包含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

尝试将数字转换为浮点数：

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 3

其他人对 parseFloat 有正确的想法。

我只是想提一下，我更喜欢像这样清理数值（与使用substr解析相反）：

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

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

替换呼叫将删除字符串中的任何字符，但 0-9 和。（句点）除外。正则表达式末尾不是 / g 。这很重要，因为没有它，只会替换第一个匹配的事件。

Answer 4

parseFloat可以解决问题。

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

Answer 5

它将邮资和小计视为字符串并将它们连接起来。你可以尝试这样的事情：

var totalVal = 0+postage+subtotal;

这应该强制它进入数字模式。

但是，如果值最终不是数字，这可能会导致问题。您应该通过正确的数字解析函数运行它并添加检查以确保它们正确解析，否则您将最终使用NaN。

Answer 6

我没有测试过您的代码，因此可能存在其他问题，但使用parseFloat进行下面的修复应停止连接并将数字加在一起。

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 7

您需要先解析数字。这应该有用。

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 8

一元加号应该有效：

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

但您可能希望您的邮资和小计变量是数字而不是字符串，所以......

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

Answer 9

遇到同样的麻烦，我检查了JS parseFloat和parseInt函数，发现它们开发得很糟糕。

因此，我通过在添加元素的值* 1之前将它们相乘来防止整个问题。这会强制JS将结果视为数字，即使值为空，也可以正确处理。如下：

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

假设您看到“el_1”等是表单中的字段名。

Answer 10

感谢所有答案！我会尝试一下，我相信它们比我的解决方案更好：

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

1.simple javascript add program

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

简单的JavaScript添加问题

11 个答案: