每秒更新Javascript中的文本框值

Question

我試圖將我在Excel中創建的工資和儲蓄計算器翻譯成我可以在我的網站上託管並隨時隨地訪問的網頁。

我想要的是自動更新值，而不需要按下加載按鈕。

我已經做了一些調查，然後放在一起這樣的代碼，但它不工作...

window.setInterval(function() { 
    var week1 = document.getElementsByName("week1").value; 
    var week2 = document.getElementsByName("week2").value; 
    var week3 = document.getElementsByName("week3").value; 
    var week4 = document.getElementsByName("week4").value; 
    var week5 = document.getElementsByName("week5").value; 

    var weekTotal = week1 + week2 + week3 + week4 + week5; 

    document.getElementById("totalHours").innerHTML = weekTotal; 
}, 1000); 

任何想法？

Answer 1

1. 使用元素ID，沒有名字 - 那麼你可以使用document.getElementById()

2. 緩存這些元素的變量，所以你不必每次

3. 轉換成.value打電話document.getElementById()做與parseInt(s, 10)號碼 - 雖然你沒有說過它是如何失敗，這將會造成你的問題，因爲.value通常是一個字符串，並且使用+對字符串進行串聯，而不是添加。

4. 不要在計時器循環中這樣做 - 它會阻止更新實時發生。相反，使用一個onchange（和/或oninput）事件處理程序，該程序將在任何值更新時立即調用。使用onchange時，每次用戶從一個輸入移動到另一個輸入時計算總和，oninput它將重新計算每個按鍵（或複製/粘貼等）。

見http://jsfiddle.net/alnitak/7Gzs6/

var form = document.getElementById('myform'); 
var inputs = form.getElementsByTagName('input'); 
var totalView = document.getElementById('total'); 

function add(ev) { 
    var total = 0; 
    for (var i = 0, n = inputs.length; i < n; ++i) { 
     var v = parseInt(inputs[i].value, 10); 
     if (!isNaN(v)) { 
      total += v; 
     } 
    } 
    totalView.innerHTML = total; 
} 

form.addEventListener('change', add, false);​ 

Answer 2

document.getElementsByName返回數組

所以，你可能要與名字「week1」等檢索的第一個元素[0]。

var week1 = document.getElementsByName("week1")[0].value; 

Answer 3

作爲一種替代你所選擇的答案，考慮利用現有的收藏和使用屬性訪問，而不是函數調用。例如

<script> 

// Test that v is an integer 
function isInt(v) { 
    return /^\d+$/.test(v + ''); 
} 

// Update the total if entered value is an integer 
function updateTotal(e) { 
    var e = e || window.event; 
    var el = e.target || e.srcElement; 
    var value = el.value; 

    // If value is an integer, use it 
    if (isInt(value)) { 
    el.form.total.value = +el.form.total.value + +value; 

    // Otherwise, do nothing (or show an error message asking 
    // the user to input a valid value) 
    } else { 
    e.preventDefault(); 
    } 
    return false; 
} 

// Add listeners to elements that need them 
window.onload = function() { 
    var form = document.forms['f0']; 
    var els = form.elements; 
    var re = /^week/; 
    var total = 0; 

    for (var i=0, iLen=els.length; i<iLen; i++) { 
    if (re.test(els[i].name)) { 
     els[i].onchange = updateTotal; 
    } 
    } 
} 
</script> 

<form id="f0" action=""> 
    week1<input name="week1" value="0"><br> 
    week2<input name="week2" value="0"><br> 
    week3<input name="week3" value="0"><br> 
    week4<input name="week4" value="0"><br> 
    week5<input name="week5" value="0"><br> 
    total<input name="total" value="0" readonly> 
    <input type="reset"><input type="submit"> 
</form> 

的isInt功能有點簡單，它應該修剪開頭和結尾的空格等等，但足以表明你必須在操作使用前測試輸入。這也是內聯監聽器可能是更好的解決方案的一個很好的例子。