Question

我正在进行HTML编码练习。 HTML文件将允许用户输入起始编号，结束编号和步骤编号。然后在单击按钮后按步长输出起始编号和结束编号之间的所有偶数。但到目前为止，单击按钮后没有显示任何内容。此外，我尝试使用span标签在段落中插入文本，但这不起作用。请帮忙。谢谢。

function validateItems(){
  var starting = document.forms["displayEvens"]["starting"].value;
  var ending = document.forms["displayEvens"]["ending"].value;
  var step = document.forms["displayEvens"]["step"].value;
  var numbers = "";
  var adding = starting;
  if (starting == "" || isNaN(starting)){
    alert("Starting Number must be filled with a number");
    document.forms["displayEvens"]["starting"].focus();
    return false;
  }
  if (ending == "" || isNaN(ending) || ending <= starting){
    alert("Ending Number must be filled with a number or must be greater than the starting number");
    document.forms["displayEvens"]["ending"].focus();
    return false;
  }
  if (step == "" || isNaN(step) || step < 0){
    alert("Step Number must be filled with a number and must be positive");
    document.forms["displayEvens"]["step"].focus();
    return false;
  }
  while (adding < ending){
    adding = adding + step;
    if (adding % 2 == 0){
      numbers = String(adding) + " ";
    }
  }

  document.getElementById("first").innerText = starting;
  document.getElementById("second").innerText = second;
  document.getElementById("middle").innerText = step;
  document.getElementById("numbers").innerText = numbers;
  return false;
}

<!DOCTYPE html>
<html>
<head>
  <script type="text/JavaScript" src="displayEvens.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
    <h1>Display Evens</h1>
    <form name="displayEvens" onsubmit="return validateItems();">
      <div class="form-group">
        <label for="starting">Starting Number</label>
        <input type="number" class="form-control" id="starting">
      </div>
      <div class="form-group">
        <label for="ending">Ending Number</label>
        <input type="number" class="form-control" id="ending">
      </div>
      <div class="form-group">
        <label for="step">Step</label>
        <input type="number" class="form-control" id="step">
      </div>
      <button type="submit" class="btn btn-default">Display Evens</button>
    </form>
    <p>Here are the even numbers between <span id="first"></span> and <span id="second"></span> by <span id="middle"></span>'s:</p><br />
    <p><span id="results"></span></p>
  </div>
</body>
</html>

Answer 1

已编辑（更完整的答案）

您正在使用value类型元素在input中阅读。即使它们是type=number，您仍然需要将它们解析为整数或浮点数。默认情况下，当您从.value元素中读取input时，它们就是字符串。现在，您只需将step数字（也是一个字符串）添加到adding变量的字符串中。如果是starting/adding=1和step=1，那么它只是连接字符串，如下所示：

1
11
111
...and so on (the while loop will never end at this rate...)

当您设置变量并从DOM元素中提取时，只需将它们传递给内置于javascript中的parseInt函数。

另外，当我认为你想连接时，你不是。（将偶数附加到您正在显示的number字符串）

number += adding + ' ';

最后，请确保您在正确的ID中显示numbers元素：results。

这是一个完整的工作示例，基于您的工作，代码有点干燥，还有其他一些细微差别：

<!DOCTYPE html>
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
    <h1>Display Evens</h1>
    <form name="displayEvens" onsubmit="return validateItems();">
      <div class="form-group">
        <label for="starting">Starting Number</label>
        <input type="number" class="form-control" id="starting">
      </div>
      <div class="form-group">
        <label for="ending">Ending Number</label>
        <input type="number" class="form-control" id="ending">
      </div>
      <div class="form-group">
        <label for="step">Step</label>
        <input type="number" class="form-control" id="step">
      </div>
      <button type="submit" class="btn btn-default">Display Evens</button>
    </form>
    <p>Here are the even numbers between <span id="first"></span> and <span id="second"></span> by <span id="middle"></span>'s:</p><br />
    <p>
      <span id="results"></span>
    </p>
  </div>

  <script type="text/javascript">
      function validateItems(){
        var form = document.forms["displayEvens"];
        // parsing the numbers as ints
        var starting = parseInt(form["starting"].value);
        var ending = parseInt(form["ending"].value);
        var step = parseInt(form["step"].value);
        var numbers = "";
        var adding = starting;
        if (starting == "" || isNaN(starting)){
          alert("Starting Number must be filled with a number");
          form["starting"].focus();
        return false;
        }
        if ((ending == "" || isNaN(ending) || ending <= starting) &&
        (starting < 0 && ending !== 0)){ // An extra scenario that was problematic...
          alert("Ending Number must be filled with a number or must be greater than the starting number");
          form["ending"].focus();
          return false;
        }
        if (step == "" || isNaN(step) || step < 0){
          alert("Step Number must be filled with a number and must be positive");
          form["step"].focus();
          return false;
        }
        while (adding < ending){
          adding = adding + step;
          if (adding % 2 == 0 && adding !== ending){ // Exclude the ending number
            numbers += adding + " ";
          }
        }

        document.getElementById("first").innerText = starting;
        document.getElementById("second").innerText = ending;
        document.getElementById("middle").innerText = step;
        document.getElementById("results").innerText = numbers; // corrected id
        return false;
      }
  </script>
</body>
</html>

虽然Javascript中的循环和span标记不起作用

1 个答案:

已编辑（更完整的答案）