텍스트 상자 값 및 계산 된 값을 사용하여 수학을 수행하는 데 문제가 있습니다.

Question

사용자가 입력하는 텍스트 상자의 값과 이전에 사용 된 계산 된 값의 값을 사용하여 수학을 수행하는 함수를 사용하고 있습니다 페이지에서. 텍스트 상자 값이 양수가 아니면 값이 양수 여야 함을 나타내는 경고가 나타납니다. 양수이면 수학 결과와 함께 경고를 표시합니다. 유일한 문제는 이런 일이 발생했을 때 나타나는 숫자는 숫자가 어디에 있어야하는지 "NaN"입니다. 내가 사용하는 값이 실제로 숫자가 아니기 때문에 이것이라고 생각하지만 이것을 고치는 방법을 모르겠습니다.

function computeTotalDistance(result) { 
 
     var total = 0; 
 
     var myroute = result.routes[0]; 
 
     for (var i = 0; i < myroute.legs.length; i++) { 
 
      total += myroute.legs[i].distance.value; 
 
     } 
 
     total = (total/1000) * 0.621371; 
 
     document.getElementById('total').innerHTML = total; 
 
     }

#this is the text box and the button that does the function 
 
<p>Your Average MPG:<input type="text" id="averagempg" name="MPG"></p> 
 
<button type="button" name="Calculate" onclick="calc_gallons()">Calculate!

Answer 1

function calc_gallons() { 
 
     var total = parseInt(document.getElementById("total").value) 
 
\t \t var averagempg = parseInt(document.getElementById("averagempg").value); 
 
\t \t var gallons = 0; 
 
\t \t if (averagempg > 0) { 
 
\t \t \t gallons = total/averagempg 
 
\t \t \t window.alert("This trip requires " + gallons + " gallon(s). Have safe travels!"); 
 
\t \t }else { 
 
\t \t \t window.alert("Your average MPG must be a positive number in order to calculate the gallons required for this trip."); 
 
\t \t } 
 
     }

문제는을 받고있다안에 calc_gallons(). value에서 가져 오려고하지만 span에 있습니다. 그래서 하나가 비활성화 된 입력에 total을 넣어, 또는 innerHTML을 통해 얻을 :

var total = parseInt(document.getElementById("total").innerHTML); 

당신이 콘솔을 사용 하시겠습니까? 나는 처음에이 문제를보고 실패하고, 다음은 그 전체가 NaN 밝혀 :

이

console.log("total:", total, typeof total); 
console.log("averagempg:", averagempg, typeof averagempg); 

Answer 2

더 나은 사용을 명시 적 타입 변환 :

다음 빈 문자열 ('')에서 호출

var total = Number(document.getElementById("total").value); 
var averagempg = Number(document.getElementById("averagempg").value); 

parseInt가 NaN을 반환 .

첫 번째 문자를 숫자로 변환 할 수없는 경우 parseInt 은 NaN을 반환합니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

예 : 나는 averagempg` 아이디`어떤 요소를 확인할 수 없습니다 https://coderwall.com/p/kwhkig/javascript-number-conversion