简单的JavaScript添加问题

我对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更新“total”文本字段，但我还没有做到这一点！

我还没有测试您的代码，因此可能存在其他问题，但是下面使用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);

};

---

parseFloat就是这样

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

---

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

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

};

---

它将邮资和小计视为字符串并连接它们。您可以尝试以下方法：

var totalVal = 0+postage+subtotal;

这将迫使它进入数字模式

---

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

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

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

};

---

您需要首先解析数字。这应该可以

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

};

---

感谢您提供的所有答案！我将尝试它们，我相信它们比我的解决方案更好：

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

函数计算器总计（）{
var postageVal=document.cart.postage.value；
var小计=document.cart.subtotal.value；
var postage=postageVal.substr（1）；
var小计=小计子项（1）；
var totalVal=编号（邮资）+编号（小计）；
document.cart.total.value=“$”+totalVal.toFixed（2）；
};

其他人对parseFloat的想法都是正确的

我只想提到，我更喜欢像这样清理数值（而不是使用substr进行解析）：

---

该replace调用将从字符串中删除除0-9和（句号）以外的所有字符。而不是正则表达式末尾的/g。这一点很重要，因为如果没有它，将只替换第一个匹配的匹配项。

一元加号应起作用：

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

但您可能打算将postage和subtotal变量设置为数字而不是字符串，所以

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

---

遇到同样的问题后，我检查了JS

parseFloat

和

parseInt

函数，发现它们开发得很差

因此，我通过在添加元素之前乘以元素值的

*1

来防止整个问题。这迫使JS将结果视为数字，即使值为空，也可以正确处理。如下所示：

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

---

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

1.简单的javascript添加程序

<!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返回结果

输入编号1:

输入第2项：

 ；
算计
函数计算（表格）
{
var a=评估值（形式a.值）；
var b=评估值（形式b.值）；
var c=a+b；
警报（“总和为”+c）；
}

它应该是float而不是in。parseInt将四舍五入为整数，我们正在处理价格：）你应该使用parseFloat而不是parseInt，因为值不是整数。是的，我在发布后发现了它，我刚刚更新了，而你在哪里发布了所有内容！无论如何，干杯获得字符串的原因是，如果任何参数是字符串，javascript将把加法视为字符串连接。当你从一个元素中获取一个值时，它总是一个字符串，所以你必须按照karim79的建议对它进行强制转换。javascript正是按照你告诉它的方式来做的。将字符串添加到一起，以数学方式添加，你必须强制转换为数字类型最后使用你的代码，非常感谢你（也感谢所有其他人！）：使用

number可能更好（）

而不是

parseFloat（）

，因为前者不太宽容（例如，不会忽略尾随的非数字字符），甚至会使用正则表达式手动验证输入。谢谢，我会使用它，因为我对javascript比较陌生，所以我不知道所有细节：您可能想将该模式更改为：/[^0-9。]*/否则它只匹配第一个字符。即使如此，它也只在字符串开头有非数字字符时匹配。在这种情况下，我的首选是远离正则表达式，让javascript尝试解析数字。parseFloat相当健壮，它可以处理诸如“1abc”之类的输入（parseFloat只返回1）。我上面给出的答案避免了正则表达式的危险。@Ray，实际上这是一个求反字符类。它将匹配整个字符串中的任何非0-9个字符。克拉^。还值得一提的是，如果字符串中包含“$”或“，”，则parseFloat将失败。

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