Question

对于使用DOM技术自己编写一些代码的JavaScript我是陌生的。我的第一个代码块正常工作，它为我提供了前两个输入字段的总和，但是当我输入第二个代码块的值时我没有得到总和。这是我的代码

<body>
        <script language ="javascript">
                function Calculate(){

                    var pricee = document.getElementById('price').value;
                    var qtyy = document.getElementById('qty').value;
                    var sum = pricee * qtyy;
                    document.getElementById('total').value = sum;

                    var newprice = document.getElementById('price2').value;
                    var newqty = document.getElementById('qty2').value;
                    var sum2 = newprice * newqty;
                    document.getElementById('total2').value = sum2;
                }
            </script>


    <form>
       Product Name: <input type="text" id="name" name="productName">
       <br>
       Product Price: <input type="text" id="price" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty" name="productQty" type="text" id="total" name="producttotal"
       onChange="Calculate()">
       <br>
       Total: <input type="text" id="total" name="producttotal">

       <hr>

       Product Name: <input type="text" id="name2" name="productName">
       <br>
       Product Price: <input type="text" id="price2" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty2" name="productQty" type="text" id="total" name="producttotal"
       onChange="Calculate()">
       <br>
       Total: <input type="text" id="total2" name="producttotal">



    </form>

Answer 1

您的代码有两个主要问题：

您的输入类型为文本，因此它们的值被视为文本。您应该先将这些值转换为数字，然后再对其进行数学运算。
您的“数量”输入具有多个id和name和type。可能是复制粘贴错误。

要固定第1点，您可以像这样使用一元运算符（+）向数字添加类型转换：

function Calculate(){
  var pricee = +document.getElementById('price').value;
  var qtyy = +document.getElementById('qty').value;
  var sum = pricee * qtyy;
  document.getElementById('total').value = sum;

  var newprice = +document.getElementById('price2').value;
  var newqty = +document.getElementById('qty2').value;
  var sum2 = newprice * newqty;
  document.getElementById('total2').value = sum2;
}

要修复第2点，您只需从输入中删除多余的标签：

第一个：

Product Qty: <input type="text" id="qty" name="productQty" type="text" id="total" name="producttotal"
       onChange="Calculate()">

应该变成这样：

Product Qty: <input type="text" id="qty" name="productQty" onChange="Calculate()">

第二个应该遵循相同的规则。另外，您应该在与计算有关的每个输入上添加onChange事件。

完整的工作代码：

HTML：

Product Name: <input type="text" id="name" name="productName">
       <br>
       Product Price: <input type="text" id="price" onChange="Calculate()" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty" name="productQty" onChange="Calculate()">
       <br>
       Total: <input type="text" id="total" name="producttotal">

       <hr>

       Product Name: <input type="text" id="name2" name="productName">
       <br>
       Product Price: <input type="text" id="price2" onChange="Calculate()" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty2" onChange="Calculate()" name="productQty"
       onChange="Calculate()">
       <br>
       Total: <input type="text" id="total2" name="producttotal">

Javascript：

function Calculate(){
  var pricee = +document.getElementById('price').value;
  var qtyy = +document.getElementById('qty').value;
  var sum = pricee * qtyy;
  document.getElementById('total').value = sum;

  var newprice = +document.getElementById('price2').value;
  var newqty = +document.getElementById('qty2').value;
  var sum2 = newprice * newqty;
  document.getElementById('total2').value = sum2;
}

正在玩的小提琴：https://jsfiddle.net/cjxs7pLo/1/

请注意，您要定义一个名为sum的变量，其值是两个值的乘积。这与代码没有任何关系，但是它的名称具有误导性，应该固定，因为其他人在阅读您的代码时可能会认为这是一个总和，但它不是总和。

没有从第二个输入字段中获得总计？

1 个答案: