javascript - 为什么这个 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