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.

Input values are strings. "12" < "2" when compared as strings. Convert to numbers first (myFunction(+x, +y) would be one way of doing that) — Niet the Dark Absol
– Niet the Dark Absol, Commented Aug 2, 2016 at 19:46

Hunter Turner · Accepted Answer · 2016-08-03 14:53:21Z

4

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

edited Aug 3, 2016 at 14:53

answered Aug 2, 2016 at 19:51

Hunter Turner

6,94411 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TrampolineTales · Accepted Answer · 2016-08-02 20:10:37Z

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>

mike d · Accepted Answer · 2016-08-02 19:51:11Z

1

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)

answered Aug 2, 2016 at 19:51

mike d

8691 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Why does this javascript function stop working?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related