テキストボックス値と計算値で計算するのに問題があります

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; 
 
     }

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 } 
 
     }

#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

問題がを得ています内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

例：https://coderwall.com/p/kwhkig/javascript-number-conversion