자바 스크립트로 매초마다 텍스트 상자 값을 업데이트합니다.

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. 사용 요소의 아이디, 이름이 아닌 - 당신이

2. 가에 .value를 변환 할 때마다 document.getElementById() 호출 할 필요가 없습니다, 그래서 당신은 그 요소 변수를 document.getElementById()

3. 캐시를 사용할 수 있습니다 parseInt(s, 10) 숫자 - 비록 이것이 실패하는 방법을 말하지 않았지만 은이 될 수 있습니다. .value은 일반적으로 문자열이며 +을 문자열에 사용하면 연결이 아니라 추가가됩니다.

4. 타이머 루프에서 수행하지 마십시오. 업데이트가 실시간으로 발생하지 않습니다. 대신, 값이 업데이트 될 때마다 즉시 호출되는 onchange (및/또는 oninput) 이벤트 핸들러를 사용하십시오. onchange을 사용하면 사용자가 한 입력에서 다른 입력으로 이동할 때마다 합계가 계산되고 oninput은 각 키를 누를 때마다 다시 계산됩니다 (또는 복사/붙여 넣기 등).

당신이 선택한 답에 대한 대안으로

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는

그래서 당신은 아마 그래서 이름이 '휴일이'와 함께 첫 번째 요소 [0]를 검색 할 배열을 반환합니다.

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

Answer 3

http://jsfiddle.net/alnitak/7Gzs6/를 참조 사용할 수있는 컬렉션의 사용을 고려하고 함수 호출보다는 속성 액세스를 사용합니다. 예 :

<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 함수는 등 앞뒤 공간을 트리밍한다 다소 간단하지만 동작에서 사용하기 전에, 입력 테스트해야한다는 표시하기에 충분하다. 이것은 또한 인라인 리스너가 더 나은 솔루션 일 수있는 좋은 예입니다.