Javascript数学与我认为的不一样_Javascript

Javascript数学与我认为的不一样

javascript

Javascript数学与我认为的不一样,javascript,Javascript,只是想知道是否有人知道我下面的javascript数学脚本有什么问题： var new_total = (document.getElementById('qty').value * document.getElementById('pricepermetre').value) + document.getElementById('delivery').value 基本上应该是（1 x 10）+2=12 但上面的脚本将传递值添加到末尾，如（1 x 10）+2=102 以下是完整的测试页面：

只是想知道是否有人知道我下面的javascript数学脚本有什么问题：

var new_total = (document.getElementById('qty').value * document.getElementById('pricepermetre').value) + document.getElementById('delivery').value

基本上应该是（1 x 10）+2=12

但上面的脚本将传递值添加到末尾，如（1 x 10）+2=102

以下是完整的测试页面：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TEST</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" rel="Stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    </head>

    <body>
    <table class="mytable">
      <tr>
        <td>QTY:</td>
        <td><input name="qty" type="text" id="qty" style="width:70px;" value="0" maxlength="9" />
          KG </td>
      </tr>
      <tr>
        <td>PRICE PER KG (EX TAX):</td>
        <td>$
          <input name="pricepermetre" type="text" id="pricepermetre" style="width:70px;" value="0" maxlength="9" /></td>
      </tr>
      <tr>
        <td>DELIVERY FEE (EX TAX):</td>
        <td>$
          <input name="delivery" type="text" id="delivery" style="width:70px;" value="0" maxlength="9" /></td>
      </tr>
      <tr>
        <td>TOTAL (EX TAX):</td>
        <td><span id="totalpricespan">$0</span>
          <input name="totalprice" type="hidden" id="totalprice" style="width:70px;" value="0" maxlength="9" />
          <span style="color:#999;">(qty x price per kg + delivery fee)</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input type="button" name="WorkOutTotals" id="WorkOutTotals" value="Work Out Totals" /></td>
      </tr>
    </table>
    <script type="text/javascript">
    $(document).ready(function(){

    $('#WorkOutTotals').click( function() {

        //work out new total
        var new_total = (document.getElementById('qty').value * document.getElementById('pricepermetre').value) + document.getElementById('delivery').value

        $("#totalprice").val(new_total);
        $("#totalpricespan").html('$' + new_total);

    });

    });
    </script>
    </body>
    </html>


试验
数量：
公斤
每公斤价格（不含税）：
$
送货费（不含税）：
$
总额（不含税）：
$0
（数量x每公斤价格+交货费）
$（文档）.ready（函数（）{
$（“#工作按钮总数”）。单击（函数（）{
//算出新的总数
var new_total=（document.getElementById（'quaty'）.value*document.getElementById（'pricepermetre'）.value）+document.getElementById（'delivery'）.value
$（“总价”）.val（新总价）；
$（“#totalpricespan”）.html（“$”+新的#总计）；
});
});

提前感谢；）

尝试使用

parseInt（document.getElementById（'delivery'）.value）。

您在强制转换（或类型推断）方面遇到问题。

JavaScript引擎混淆了字符串和数字，请尝试：

var new_total=（document.getElementById（'qty'）.value）*document.getElementById（'pricepermetre'）.value）+parseInt（document.getElementById（'delivery'）.value）
也许这样就行了
var new_total = parseInt((document.getElementById('qty').value * document.getElementById('pricepermetre').value)) + parseInt(document.getElementById('delivery').value)

你在处理字符串，而不是数字。使用parseInt（）
在算术之前获取数字。
document.getElementById（'delivery'）。value
返回一个字符串，您将以字符串串联结束，因为JS使用+
连接字符串
更新
JavaScript的+
根据您使用的内容具有不同的含义。令人惊讶的是，*
即使数字显示为字符串，也能成倍增加
试试这个
// `*` will infer that you wanted multiplication
alert("2" * 2);
alert("2" * 2);
alert(2 * "2");
alert(2 * 2);

// however, the `+` may take addition or string concatenation
alert("1" + "0");
alert("1" + 0);
alert(1 + "0");
alert(1 + 0);

字段中的值为字符串类型。当您乘法时，值被隐式转换为数字，但当您使用+
运算符时，它被转换为字符串（因为2是字符串）。使用parseFloat
或parseInt
将文本转换为数字
var new_total = (
                parseInt(document.getElementById('qty').value, 10) *
                parseInt(document.getElementById('pricepermetre').value, 10)
                )
                +
                parseInt(document.getElementById('delivery').value, 10);

您可以从这些值中获取字符串。将它们转换成数字，然后对它们进行运算。使用字符串上的+
，您只需将它们串联起来
我在这里使用的基数参数为10，强制将字符串转换为以10为基数的数字。比如说，010
变成了10
，而不是8
（八进制）。您可能需要使用parseFloat
来获取小数位数。
具有小数位数的元素（input
元素等）的属性是字符串。现在，JavaScript将尝试通过将字符串转换为数字来实现您想要的功能，但它无法猜测您的意图，特别是当+
运算符的一侧是数字，另一侧是字符串时，引擎将假定您想要将数字转换为字符串并连接，而不是假设您希望将另一个字符串转换为数字并进行相加
要正确地将字符串转换为数字，请对整数使用parseInt
（并指定基数），对小数表示的小数使用parseFloat
。如果这些是整数：
var new_total = (
      parseInt(document.getElementById('qty').value, 10) *
      parseInt(document.getElementById('pricepermetre').value, 10)
    ) +
    parseInt(document.getElementById('delivery').value, 10);

或者如果它们是小数：
var new_total = (
      parseFloat(document.getElementById('qty').value) *
      parseFloat(document.getElementById('pricepermetre').value)
    ) +
    parseFloat(document.getElementById('delivery').value);

请注意，parseFloat
上没有基数参数；该数字应始终以十进制10为基数
依靠JavaScript的规则来“强制”字符串变为数字通常是一个坏主意，尤其是因为你需要确保控制基数等等。
看起来你是在连接字符串，而不是添加数字几乎所有的答案（包括我最初的答案）都假设数字是整数，但我的回答是“如果字符串包含一个小数点怎么办？”所以我也更新了内容——我认为这很重要，因为如果价格是一个小数点（例如“0.20”或类似值），我不会感到惊讶。“JavaScript引擎混淆了字符串和数字”不，不是。编码器是。如果所讨论的字符串包含一个十进制怎么办？第一个parseInt（）
是多余的，因为您要将数值运算的结果传递给它。另外，特别是当涉及用户输入时，您应该为parseInt（）
的第二个参数指定基数10。您应该为parseInt（）
的第二个参数指定基数10，尤其是在处理用户输入时。