如何在Javascript中进行乘法运算

Question

好吧，所以我和新来的一样新到用JavaScript编写代码，这实际上是我第一次尝试，这是我的问题。我需要做的这个表格是将数量框的输入与价格框的输入相乘并自动填充分机框，但是我只能想出如何添加数量和价格的总计，并将该总数填入分机盒。这里是我使用的代码：

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箱总计在物质总箱这显然ISN”发生这种情况时，剧本的工作原理是将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

我需要（...）将Qty框的输入与Price框的输入相乘并自动填充分机框

Firsf关闭，您正在总结值（extend1 = extend1 + document.getElementById(id).value*1;）。如果你想将它们相乘，以及，乘他们（但不要忘了1而不是0初始化extend1）：

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()。

好了，所以首先我需要乘以数量和价格箱子，其次我需要弄清楚为什么这个脚本不能从分机盒所获得的价值后，他们是从数量输入与价格脚本

你summate()不会被调用，因为它是迷上了“onInput”事件的extendN输入。而你正在改变extendN有：

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

哪个不会触发的onInput事件。

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

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 2

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