입력시 계산 된 열의 합계를 얻는 방법

Question

트리 번호 열이 있고 계산 된 열을 만들어 트리 입력의 합계를 얻지 만 변경 사항을 보려면 저장을 클릭해야합니다. 누군가가 세 개의 열 중 하나에서 숫자를 입력하거나 변경하면 저장을 누르기 전에 계산 된 열에서 결과를 얻으려고합니다.

function myFunction() { 
    var x = document.getElementById("myInput").value; 
    document.getElementById("demo").innerHTML = "You wrote: " + x; 
} 

하지만 내 경우에는

내가 3 수의 열 어떤 생각을 가지고 나는이 자바 스크립트 코드를 시도?

Answer 1

아래 해결책을 참조하십시오. 숫자 만이

이벤트 리스너를 부착하고 총을 계산하는 동안 당신이 할 것은 입력을 통해 루프

var inputs = document.getElementsByClassName("myInput"); 
 

 
function myFunction() { 
 
\t var total = 0; 
 

 
    Array.prototype.forEach.call(inputs, function (input) { 
 
     total += +input.value; 
 
    }); 
 

 
    document.getElementsByClassName("myOutput")[0].innerHTML = "The total is: " + total; 
 
} 
 

 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].addEventListener("input", function() { 
 
     myFunction(); 
 
    }); 
 
}

<form action="#"> 
 
    <input type="text" class="myInput"> 
 
    <input type="text" class="myInput"> 
 
    <input type="text" class="myInput"> 
 
</form> 
 

 
<div class="myOutput"></div>

를 허용되었다 있도록 몇 가지 유효성 검사를 추가해야합니다. 위에 설명 된 두 가지 방법으로이 작업을 수행 할 수 있습니다.