Javascrip数値の比較がおかしい時は、変数の型が本当に数値型(Number)になっているか疑いましょう。
例えば、htmlのinput(number)要素から値を取得し、その値を比較してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="script.js"></script>
</head>
<body>
<input id="input1" type="number" value="5">
<input id="input2" type="number" value="20">
</body>
</html>
window.onload = function () {
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input1Value = input1.value;
const input2Value = input2.value;
console.log("input1の値:" + input1Value);
console.log("input2の値:" + input2Value);
if(input1Value > input2Value){
console.log("input1の方が大きい");
}
};
Consoleで出力を確認すると・・あれ?
input1の方が大きい
20より5のほうが大きい判定になってしまいました。
比較の結果が逆になってしまっていますね。
数値同士の比較結果がおかしくなる原因
これは、inputタグのvalueを取得したときに変数の型がstringになってしまっているからです。
変数の型を調べるには、typeofを使います。
console.log(typeof(input1Value)); //string
console.log(typeof(input2Value)); //string
文字列型の”20″と”5″を比較すると、1文字目の”2″と”5″がUnicodeのコードに変換され、それぞれ「U+0032」と「U+0035」になります。
Unicode同士の比較はコードポイントの大小によって判断されるので、結果的に5の方が大きいと判定されてしまっている、ということですね。
そのような時は、parseIntなどを使ってnumber型に変換してあげます。
window.onload = function () {
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input1Value = parseInt(input1.value); //整数に変換する
const input2Value = parseInt(input2.value); //整数に変換する
console.log("input1の値:" + input1Value);
console.log("input2の値:" + input2Value);
if(input1Value > input2Value){
console.log("input1の方が大きい");
}
};
すると、正しい比較ができるようになります。
コメント