Why does this javascript function stop working?

Question

What I have here is a simple comparison application that takes 2 numbers, sees which one is bigger and then changes the inner HTML of a paragraph accordingly. When I run it it seems to be working ok, but as I start plugging new numbers in around the 3rd or 4th time, it stops working and starts saying that the lower number is higher. It seems to be random when this happens. Could anyone explain to me why it's happening?

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

Thank you very much.

Answer 1

You need to convert the numbers before you compare them. You can accomplish this by using the Number() function, or unary plus .

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

JSFiddle

OR

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

JSFiddle

Answer 2

Need to convert the strings to numbers.

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

Few ways would be:

 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

The value from your inputs are being compared as strings.

So numbers like "10" will appear smaller than "2" because they are being compared lexicographically instead of numerically. You can solve this by adding a + to your num1 and num2 parameters when you compare them

if (+num1 > +num2)