代码不能处理更大范围的数字

Question

我的问题是，我编写了一段代码，接受两个数字并写出这两个数字之间的所有数字（包括给定的两个数字）。该代码对于4和7这些数字有效，它输出“4 5 6 7”，但当第二个数字比第一个数字大一点时，例如数字6和14时，该代码无法输出任何东西。如果有人能够解释为什么会出现这种情况，以及我该如何解决这个问题，我将非常高兴。

function calculate() {
  var start = document.getElementById("number1").value;
  var end = document.getElementById("number2").value;
  var answer = "";
  for (var i = start; i <= end; i++) {
    answer = answer + i + " ";
  }
  document.getElementById("answer2").innerHTML = answer;
}

<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="calculate()">Pokaż</button>
<div id="answer2"></div>

- Doğuş Hamdi

Answer 1

value属性返回文本字段value属性的字符串表示形式。
要比较start和end，您需要将它们转换为数字（例如使用Number原始包装器），否则字符串6将（按字母顺序）大于字符串14。

function calculate() {
  var start = Number(document.getElementById("number1").value);
  var end = Number(document.getElementById("number2").value);
  var answer = "";
  for (var i = start; i <= end; i++) {
    answer = answer + i + " ";
  }
  document.getElementById("answer2").innerHTML = answer;
}

<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="calculate()">Pokaż</button>
<div id="answer2"></div>

- Alessio Cantarella

---

这解决了问题，但你能解释一下为什么吗？ - Doğuş Hamdi

@DoğuşHamdi 我已经解释了原因。 - Alessio Cantarella

@DoğuşHamdi 字符串6在按字母顺序比较时比字符串14大，因此您的for()循环不起作用。比较：console.log('6' > '14') (true)和console.log(6 > 14) (false)。 - Tim Lewis

哦，对不起，没看到，谢谢你的帮助 :) - Doğuş Hamdi

Answer 2

那是使用for循环中的parseInt的替代解决方案。

function calculate() {
  var start = document.getElementById("number1").value;
  var end = document.getElementById("number2").value;
  var answer = "";
  for (var i = parseInt(start); i <= parseInt(end); i++) {
    answer = answer + i + " ";
  }
  document.getElementById("answer2").innerHTML = answer;
}

<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="calculate()">Pokaż</button>
<div id="answer2"></div>

- Evren

---

但是为什么你想要在每个i的值上重新解析end呢？我认为将其作为分配给end的一部分会更有意义。此外，您可能应该提到输入以十六进制（和潜在的八进制，取决于浏览器/运行时）“数字”方式接受，因为您没有传递第二个参数：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#description - karfau