logo标签列表

JavaScript中的循环[from X to Y]

javascript
5

我开始学习JavaScript，遇到了第一个问题。在任务中，我想执行一个循环，打印用户指定范围内的数字，例如：对于值2和10，在div中打印：2,3,4,5,6,7,8,9,10。我的代码：

function loopChecking() {
'use strict';
var numberA = document.getElementById("numberA").value,
    numberB = document.getElementById("numberB").value,
    i = 0,
    result = "";

for (i = numberA; i <= numberB; i += 1) {
    result += i + " ";
}
document.getElementById("numbers").innerHTML = result;
}

以下是HTML代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Loop</title>
    <script src="numbers.js"></script>
</head>
<body>
    <input type="text" id="numberA" />
    <input type="text" id="numberB" />
    <input type="submit" value="Show" onclick="loopChecking()" />
    <div id="numbers"></div>  
</body>
</html>

感谢您的帮助，MD。
5个回答
8

首先需要把numberA和numberB转换为数字类型。

var numberA = +document.getElementById("numberA").value, //observe unary + 
    numberB = +document.getElementById("numberB").value, //observe unary +

演示

function loopChecking() {
  'use strict';
  var numberA = +document.getElementById("numberA").value,
    numberB = +document.getElementById("numberB").value,
    i = 0,
    result = "";

  for (i = numberA; i <= numberB; i += 1) {
    result += i + " ";
  }
  document.getElementById("numbers").innerHTML = result;
}
<input type="text" id="numberA" />
<input type="text" id="numberB" />
<input type="submit" value="Show" onclick="loopChecking()" />
<div id="numbers"></div>

2

您的numberA和numberB并非数字。您需要对它们进行解析。

var numberA = parseInt(document.getElementById("numberA").value,10),
    numberB = parseInt(document.getElementById("numberB").value,10),
同时指定一个基数。 parseInt(val, 10); - InfinitePrime
1

首先，您需要检查您的数字是否真的是数字。

此外，您可以添加检查 (numberA < numberB) 或根据 numberA 和 numberB 的值指定循环。

function loopChecking() {
  var numberA = Number(document.getElementById("numberA").value),
      numberB = Number(document.getElementById("numberB").value),
      result = "";


  if (numberA && numberB) {    
    for (var i = numberA; i <= numberB; i++) {
      result += i + ' ';
    }
  } 
  
  document.getElementById("numbers").innerText = result;
}
<html>
<head>
    <meta charset="utf-8" />
    <title>Loop</title>
    <script src="numbers.js"></script>
</head>
<body>
    <input type="text" id="numberA" />
    <input type="text" id="numberB" />
    <input type="submit" value="Show" onclick="loopChecking()" />
    <div id="numbers"></div>  
</body>
</html>

0

其他将字符串显式解析为数字的答案是正确的，但在HTML5中，特别是对于移动用户来说，有更好的方法。如果您希望用户只输入数字，则必须将类型设置为number而不是text。您需要使用HTMLInputElement的valueAsNumber属性。

例如，在HTML标记中：

<input type="number" id="numberA" />

在JavaScript中：

var numberA = document.getElementById("numberA").valueAsNumber


function loopChecking() {
  'use strict';
  var numberA = document.getElementById("numberA").valueAsNumber,
    numberB = document.getElementById("numberB").valueAsNumber,
    i = 0,
    result = "";

  for (i = numberA; i <= numberB; i += 1) {
    result += i + " ";
  }
  document.getElementById("numbers").innerHTML = result;
}
<input type="number" id="numberA" />
<input type="number" id="numberB" />
<input type="submit" value="Show" onclick="loopChecking()" />
<div id="numbers"></div>

就可读性和用户体验而言，这肯定更好。

0

这里是一个可用的 Fiddle 示例。

我在 document.getElementById("numberA").value 上使用了 parseInt()。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接