2012-10-15 43 views
1

我目前正在做一個學校項目,我必須使用javascript來創建一個頁面,用戶可以在輸入框中鍵入多個數字。動態數組與輸入javascript

輸入每個數字後,會出現一個添加按鈕,然後在輸入下方的另一個框中顯示數字。所以每個數字都垂直向下顯示在頁面上。

從那裏我需要兩個按鈕。第一個計算哪個會將數字加在一起並計算出平均值。第二個將清除數組以重新開始。

我相信我對最後兩個按鈕沒問題。我不確定的是用戶輸入應該如何創建動態數組,然後將顯示在頁面中。我已經能夠得到一個單一的數字輸入,但我錯過了下一步,所以輸入的下一個數字將顯示,並允許我建立一個數組,從中進行計算。

回答

0

最簡單的方法是循環顯示數字的輸入並添加每個數字,而不是嘗試維護從第一個輸入更新的數組。

棒顯示input元素放入容器與id,那麼你可以做喜歡的事,很簡單:

var container = document.getElementById("container-id"), 
    inputs = container.children, 
    total; 

for (var x = 0, y = inputs.length; x < y; x++) { 
    total += parseInt(inputs[x].value, 10); 
} 

alert(total) //do something way better than alert! 
0

請試試這個,我認爲它會爲你工作

JAVA SCRIPT:

<script type="text/javascript"> 
    var arr = new Array(); 
    function addNum() 
    { 
    var temp = document.getElementById('a').value; 
    arr.push(temp); 
    document.getElementById('a').value = ""; 
    getAvg(); 
    } 

    function getAvg() 
    { 
    var sum = 0; 
    for(var i = 0; i < arr.length; i++){ 
     sum += parseInt(arr[i]); 
    } 

    var avg = sum/arr.length; 

    document.getElementById('sum').value = sum; 
    document.getElementById('avg').value = avg; 


     } 

function clearAll() 
{ 
    arr.length = 0; 
    document.getElementById('a').value = ""; 
    document.getElementById('sum').value = ""; 
    document.getElementById('avg').value = ""; 
} 
</script> 

HTML: 

     <table> 
     <tr><td><input type="text" id="a"></td> 
     <td>Sum :<input type="text" id="sum"></td> 
     <td>Avg :<input type="text" id="avg"></td></tr> 
     <tr><td><input type="button" value="add" onclick="addNum()"></td> 
     <td><input type="reset" value="reset" onclick="clearAll()"></td></tr> 

    </table