如何在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;}