なぜこのjavascript機能は動作しませんか？

Question

ここで私が持っているのは、2つの数字をとり、どちらが大きいのかを見て、それに応じて段落の内部HTMLを変更する簡単な比較アプリケーションです。私はそれを実行するとき、それはうまくいくようだが、私は3または4回目の周りに新しい数字を差し込むようになると、それは動作を停止し、より低い数字が高いと言うことを開始します。これが起こると、ランダムであるように見えます。誰が私になぜそれが起こっているのか説明できますか？

HTML：

<p>Enter 2 numbers to see which one is highest.</p> 
<input type="text" id="firstnumber" class="inputs" class="clearme"/> 
<input type="text" id="secondnumber" class="inputs"/> 
<input type="button" class="inputs" value="submit" id="button"/> 
<p id ="message" style="color: blue;">Answer appears here.</p> 

CSS：

.inputs { 
    float : left; 
} 

#secondnumber { 
    clear: both; 
} 

#button { 
    clear: left; 
} 

p { 
    clear: both; 
} 

JavaScriptの：

function myfunction(num1, num2) { 
    if (num1 > num2) { 
    document.getElementById("message").innerHTML = "The Higher number is " + num1 + ", which was the first value."; 
    } else { 
    document.getElementById("message").innerHTML = "The Higher number is " + num2 + ", which was the second value."; 
    } 
} 

document.getElementById('button').onclick = function(){ 
    var x = document.getElementById("firstnumber").value; 
    var y = document.getElementById("secondnumber").value; 
    myfunction(x, y); 
    console.log(x); 
    console.log(y); 
} 

JSFiddle

ありがとうございました。

Answer 1

あなたがそれらを比較する前に番号を変換する必要があります。これは、Number()関数またはunary plus関数を使用して実行できます。あなたの入力から

if (Number(num1) > Number(num2)) { 
    //... 
}; 

JSFiddle

OR

if (+num1 > +num2) { 
    //... 
}; 

JSFiddle

Answer 2

文字列を数字に変換する必要があります。

• Number(Str)
• parseInt(Str, 10)
• +Str

いくつかの方法は次のようになります。

function myfunction(num1, num2) { 
 
    if (num1 > num2) { 
 
    document.getElementById("message").innerHTML = "The Higher number is " + num1 + ", which was the first value."; 
 
    } else { 
 
    document.getElementById("message").innerHTML = "The Higher number is " + num2 + ", which was the second value."; 
 
    } 
 
} 
 

 
document.getElementById('button').onclick = function() { 
 
    var x = Number(document.getElementById("firstnumber").value); 
 
    var y = Number(document.getElementById("secondnumber").value); 
 
    myfunction(x, y); 
 
    console.log(x); 
 
    console.log(y); 
 
}

.inputs { 
 
    float: left; 
 
} 
 
#secondnumber { 
 
    clear: both; 
 
} 
 
#button { 
 
    clear: left; 
 
} 
 
p { 
 
    clear: both; 
 
}

<p> 
 
    Enter 2 numbers to see which one is highest. 
 
</p> 
 
<input type="text" id="firstnumber" class="inputs" class="clearme" /> 
 
<input type="text" id="secondnumber" class="inputs" /> 
 
<input type="button" class="inputs" value="submit" id="button" /> 
 
<p id="message" style="color: blue;"> 
 
    Answer appears here. 
 
</p>

Answer 3

値は文字列として比較されます。

"10"のような数字は、数字の代わりに辞書的に比較されているので、 "2"より小さく表示されます。これを解決するには、num1とnum2のパラメータを比較するときに+を付け加えます。

if (+num1 > +num2)