Почему эта функция 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

ИЛИ

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)