2014-10-02 4 views
1

나는 세 점수 각각의 가치를 얻고 그들을 합산하여 "합계 :"로 표시하려고합니다. 내 문제는 점수 값 중 하나가 변경 될 때마다 해당 전체 값이 변경되도록하는 방법을 알아낼 수 없다는 것입니다.총 합계 JavaScript

어떻게 든이 작업을 수행하기 위해 어딘가에서 "onchange"를 호출 할 수 있습니까? 감사. 여기

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="getTotal.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <header> 
     <tbody> 
     <tr> 
      <td> 
      Total: 
      <output id="total" class="totalScore"></output> 
      </td> 
     </tr> 
     </tbody> 
    </header> 
    <table> 
    <tbody> 
     <td>Score 1</td> 
     <td><input type="number" id="score1"/></td> 

     <td>Score 2</td> 
     <td><input type="number" id="score2" /></td> 

     <td>Score 3</td> 
     <td><input type="number" id="score3" /></td> 
    </tbody> 
    </table> 

<script type="text/javascript">assign();</script> 

    </body> 
</html> 

function total() { 
    var score1 = document.getElementById("score1"); 
    var score2 = document.getElementById("score2"); 
    var score3 = document.getElementById("score3"); 

    return score1 + score2 + score3; 
} 

function assign() { 
    var totalScore = document.getElementById("total"); 
    totalScore = total; 
} 
+7

()'와'에서는 parseFloat()'. 둘째, DOM 요소의 'value'속성을 살펴보십시오. 마지막으로'onchange' 또는'onkeyup' 이벤트를 확인하십시오. – BenM

답변

0

예, 당신이 원하는 경우 값이 변경 (당신이 입력에서 멀리 초점 후), 또는 keydown를 사용할 때 다시 계산하기 onchange 이벤트를 사용하여 내 자바 스크립트 클래스 getTotal.js입니다 입력 할 때 다시 계산하십시오.

1

'있는 그대로'의 코드는 작동하지 않습니다. 내 의견에서 언급했듯이 parseFloat() (또는 허용 값에 ​​따라 parseInt())을보고 DOM 객체의 value 속성을 봐야합니다. 마지막으로 사용자 상호 작용을 위해 onchange 또는 onkeyup 이벤트를 사용할 수 있습니다. 모든 이들의 결합

, 당신에게 작업 예제를 다음을 줄 것이다 : 첫째 오프에서는 parseInt '에 대한 자세한 내용하시기 바랍니다

var score1Field = document.getElementById('score1'), 
    score2Field = document.getElementById('score2'), 
    score3Field = document.getElementById('score3'); 

function sumit() 
{ 
    var score1 = parseFloat(score1Field.value), 
     score2 = parseFloat(score2Field.value), 
     score3 = parseFloat(score3Field.value); 

    if(isNaN(score1)) { score1 = 0; } 
    if(isNaN(score2)) { score2 = 0; } 
    if(isNaN(score3)) { score3 = 0; } 

    total = score1 + score2 + score3; 

    document.getElementById('total').innerHTML = total; 
} 

// Bind our events: 
score1Field.onkeyup = sumit; 
score2Field.onkeyup = sumit; 
score3Field.onkeyup = sumit; 

// Call it when the page loads to handle default values: 
sumit(); 

jsFiddle Demo