計算時にNaNを取得する

Question

htmlに数字を入力しようとすると、ここでNaNの値が得られます。どうしてか分かりません。

var firstNumber= document.getElementById("numberone").value; 
var secondNumber = document.getElementById("numbertwo").value; 

function addition(){ 
    var result = firstNumber + secondNumber; 
    document.getElementById("equals").innerHTML = result; 
} 

function subtraction(){ 
    var result = firstNumber - secondNumber; 
    document.getElementById("equals").innerHTML = result; 
} 

function multiplication(){ 
    var result = firstNumber * secondNumber; 
    document.getElementById("equals").innerHTML = result; 
} 

Answer 1

あなたは値が入力値とベース数学数字システムにおける基地あるparseInt(value, base)を用いて入力から値を解析しなければなりません。

var firstNumber = parseInt(document.getElementById("numberone").value, 10); 
var secondNumber = parseInt(document.getElementById("numbertwo").value, 10); 

あなたはここで詳細を読むことができます： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

編集：私はあなたが整数値を処理しているが、あなたは浮動小数点値を処理するためにparseFloatを試したり、また、操作するためのライブラリを使用できるものと Numeral.js

Answer 2

変数firstNumberとsecondNumberは、プログラムの初めに一度設定されます（空の文字列になる可能性が高い、2つの入力は何も満たされていませんそれらを設定するコードの2行が実行されるまでに）。これらの値に依存する関数の1つが実行されるたびに値を取得する必要があります。

function getValue(id) { 
    return +document.getElementById(id).value; // get the value of the input whose ID is id and convert the value to a number using unary + 
} 

function addition(){ 
    var result = getValue("numberone") + getValue("numbertwo"); // use getValue here 
    document.getElementById("equals").innerHTML = result; 
} 

function subtraction(){ 
    var result = getValue("numberone") - getValue("numbertwo"); // here two 
    document.getElementById("equals").innerHTML = result; 
} 

//...