Question

好的，所以我和使用JavaScript编写代码一样新，这实际上是我的第一次尝试，这是我的问题。我需要用这个表单做的是将Qty框的输入与Price框的输入相乘并自动填充Ext框，但我只能弄清楚如何添加数量和价格的总和并填充该总数。 Ext框。这是我正在使用的代码：

function multiply1() {
    var extend1=0
    for (var i=1; i <= 2; i++) {
        var id = "1_value"+i;
        extend1 = extend1 + document.getElementById(id).value*1;
    }
    document.getElementById("extend1").value = extend1;
}
function multiply2() {
    var extend2=0
    for (var i=1; i <= 2; i++) {
        var id = "2_value"+i;
        extend2 = extend2 + document.getElementById(id).value*1;
    }
    document.getElementById("extend2").value = extend2;
}
 function multiply3() {
    var extend3=0
    for (var i=1; i <= 2; i++) {
        var id = "3_value"+i;
        extend3 = extend3 + document.getElementById(id).value*1;
    }
    document.getElementById("extend3").value = extend3;
}
function multiply4() {
    var extend4=0
    for (var i=1; i <= 2; i++) {
        var id = "4_value"+i;
        extend4 = extend4 + document.getElementById(id).value*1;
    }
    document.getElementById("extend4").value = extend4;
}
 function multiply5() {
    var extend5=0
    for (var i=1; i <= 2; i++) {
        var id = "5_value"+i;
        extend5 = extend5 + document.getElementById(id).value*1;
    }
    document.getElementById("extend5").value = extend5;
}

此外，如果你在数量框中输入一个总数，它将填充ext框，但也应该填充到材料总计框中的ext框的总数，这显然不会发生，脚本的工作总计了ext框和通过在任何ext框中输入总数来填充材料总计框，它将填充或总计填充到材料总计框中。

好的，首先我需要将Qty和Price框相乘，其次我需要弄清楚为什么这个脚本在从Qty和Price脚本输入之后没有从ext框中获取值

function summate() {
    var mattotal=0
    for (var i=1; i <= 5; i++) {
        var id = "extend"+i;
        mattotal = mattotal + document.getElementById(id).value*1;
    }
    document.getElementById("mattotal").value = mattotal;
}

感谢您的帮助！

Answer 1

function multiply1() {
    var qty = document.getElementById('1_value1').value;
    var price = document.getElementById('1_value2').value;
    if (qty && price) {
        var total = qty * price;
        document.getElementById("extend1").value = total;
    } else {
        document.getElementById("extend1").value = '';
    }
}

也不需要有5种不同的multiplyN功能。编写一个以N为参数的函数，并使用该函数计算元素的ID。

Answer 2

我需要（...）将数量框的输入与价格框的输入相乘并自动填充Ext框

Firsf off，您正在对值进行求和（extend1 = extend1 + document.getElementById(id).value*1;）。如果你想将它们相乘，那么，将它们相乘（但不要忘记用extend1而不是1初始化0）：

function multiply1() {
    var extend1 = 1;                                           // <--changed here
    for (var i=1; i <= 2; i++) {
        var id = "1_value"+i;
        extend1 = extend1 * document.getElementById(id).value; // <--changed here
    }
    document.getElementById("extend1").value = extend1;
}

因此，从multiply1()到multiply5()执行此操作的风险最小。

好的，首先我需要将Qty和Price框相乘，其次我需要弄清楚为什么这个脚本在从Qty和Price脚本输入之后没有从ext框中获取值

您的summate()未被调用，因为它挂钩在onInput输入的“extendN”事件中。您正在使用以下内容更改extendN

document.getElementById("extend1").value = extend1;

哪个不会触发 onInput事件。

最快的解决方案？设置extendN的值后，请致电summate()。这是最终版本：

function multiply1() {
    var extend1 = 1;                                           // <--changed here
    for (var i=1; i <= 2; i++) {
        var id = "1_value"+i;
        extend1 = extend1 * document.getElementById(id).value; // <--changed here
    }
    document.getElementById("extend1").value = extend1;
    summate();                                                 // <--changed here
}

这是一个包含建议更改的演示：http://jsfiddle.net/zNFV8/

Answer 3

我有一些可能有用的代码。它适用于我的本地盒子，但我不能让它在jsfiddle中工作：/

HTML代码

<label for = "price"> Price </label>
<input name="price" type = "text" id="price" />

<br />

<label for = "quantity"> Quantity </label>
<input name="quantity" type = "text" id="quantity" />

<br />

<label for = "total"> Total</label>  
<input name ="total" type = "text" id = "total" />

的Javascript

document.getElementById("quantity").setAttribute("onkeyup", 'calculateTotal()');
document.getElementById("price").setAttribute("onkeyup", 'calculateTotal()');

function calculateTotal() {
  var price = parseFloat(document.getElementById("quantity").value);
  var quantity = parseFloat(document.getElementById("price").value);

if (price * quantity == parseFloat(price * quantity))
    document.getElementById("total").value = price * quantity;
else
    document.getElementById("total").value = '';
}

CSS

 label {width: 100px;  float: left;}

如何在Javascript中相乘

3 个答案: