2016-09-30 3 views
-6

사용자가 몇 가지 입력란을 입력하고 양식에서 목표의 전체 및 백분율을 계산하도록하는 양식이 있습니다. JavaScript에 익숙하지 않아 백분율을 계산하는 방법을 모르겠습니다. 내가 parseInt(total)/parseInt(goal)*100을 때 나는 NaN이 오류를 얻을 :JavaScript로 백분율을 계산하십시오.

<html> 
    <head> 
    <style media="screen"> 
     .testform INPUT { 
      display: block; 
      margin-bottom: 10px; 
      border: 1px solid #212121; 
      height: 35px; 
      font-size: 16px; 
     } 
    </style> 
    <script type="text/javascript"> 
     calculate = function() { 
      var cash = document.getElementById('a1').value; 
      var checks = document.getElementById('a2').value; 
      var coin = document.getElementById('a3').value; 
      var goal = document.getElementById('goalamount').value; 
      var total = document.getElementById('a4').value; 

      document.getElementById('a4').value = parseInt(cash)+parseInt(checks)+parseInt(coin); 
      document.getElementById('a5').value = parseInt(total)+parseInt(goal); 
     } 
    </script> 
    </head> 
    <body> 
    <form class="testform"> 
     Goal amount <input id="goalamount" type="text" value="3000"/> 
     Cash Collected <input id="a1" type="text" /> 
     Checks Collected <input id="a2" type="text" /> 
     Coins Collected <input id="a3" type="text" /> 
     Total Collected <input id="a4" type="text" name="total_amt" onblur="calculate()" /> 
     Percent of Goal<input id="a5" type="text" name="goal_amt" /> 
    </form> 
    </body> 
</html> 
+3

자바 = 자바 스크립트 – shmosel

+0

당신의'total_amt'와'goal_amt' 입력 필드가 변경'유형 =! "text"를'type = "number"'로 변경하십시오. 이렇게하면이 필드에 숫자 만 입력됩니다. –

+0

어느 시점에 퍼센트를 계산하려고합니까? 어디에서'parseInt (total)/parseInt (goal) * 100'을 코드에 넣을까요? 필자가 생각하기에, 여러분이 언급 한 입력 중 하나가 숫자가 아니거나 숫자가 아닌 값을 가지지 않는다는 것을 가리키는 parseInt ("")를 어느 시점에서 시도하기 때문에 NaN을 얻고있는 것입니다. –

답변

1

내 로컬 env에서 코드를 실행 한 다음 NaN 예외가 throw 된 이유를 알고있었습니다. 변수 total은 위의 코드에 따라 HTML 입력 요소 값에서 검색되지만 총 변수는 실행 된 행 parseInt(cash)+parseInt(checks)+parseInt(coin); 앞에 문자열이 비어있게됩니다. 그 후 parseInt는 빈 문자열을 구문 분석 한 후 NaN을 int로 반환합니다. 그러면 입력 상자에 NaN이 표시됩니다.

이 문제를 해결하는 솔루션이 있습니다 : 코드 아래로 :

var goal = document.getElementById('goalamount').value; 

document.getElementById('a4').value = parseInt(cash)+parseInt(checks)+parseInt(coin); 

var total = document.getElementById('a4').value; 

...

1

NaN의 "숫자가 아님"을 의미한다. 합계를 정수로 파싱 할 수 있는지 확인하고, 목표를 정수로 파싱 할 수 있는지, 그리고 값이 0이 아닌지 확인한 다음 좋을 것입니다.

관련 문제