JavaScript 按给定步骤查找偶数的函数

JavaScript function to find even numbers by given step

我正尝试在 JavaScript 中编写一个函数来完成此练习。我写了一个函数来显示偶数。但是,我很难弄清楚如何通过示例中的步骤获得显示偶数的功能。

允许用户在页面上的三个文本框中输入起始编号、结束编号和步长值。将出现一个按钮,单击该按钮时应输出开始值和结束值之间的所有偶数。 illustration example of exercise

在上面的示例中,用户分别输入了 4 和 20 作为起点和终点,并将步长设置为 3。这意味着考虑了数字 4、7、10、13、16 和 19,但是只显示了4、10、16。

这是我到目前为止编写的代码:

   function showEvens () {
   var start = document.getElementById("start").value;
   var end = document.getElementById("end").value;
   var step = document.getElementById("step").value;
   var evenNums = "<br>Even Numbers:<br>";

   for(i=start; i<=end; i++) {
   if (i%2 == 0) {
   evenNums += i + "<br>";
   }
   }
   document.getElementById("result").innerHTML = evenNums;
   }

您应该在 for 循环中将 i 增加 stepi += step 而不是 i++):

function showEvens() {
  var start = 4;
  var end = 20;
  var step = 3;
  var evenNums = "<br>Even Numbers:<br>";

  for (i = start; i <= end; i+=step) {
    if (i % 2 == 0) {
      evenNums += i + "<br>";
    }
  }
  document.getElementById("result").innerHTML = evenNums;
}

showEvens();
<div id="result">

</div>

您的代码笔无法正常工作,因为 value returns 一个字符串。您应该使用 valueAsNumber 以整数形式获取它:

<div class="container">
  <h1>Display Events</h1>
  <script>
    function showEvens() {
      var start = document.getElementById("start").valueAsNumber;
      var end = document.getElementById("end").valueAsNumber;
      var step = document.getElementById("step").valueAsNumber;
      var evenNums = "<br>Even Numbers:<br>";

      for (i = start; i <= end; i += step) {
        if (i % 2 == 0) {
          evenNums += i + "<br>";
        }
      }
      document.getElementById("result").innerHTML = evenNums;
    }
  </script>
  <table>
    <tr>
      <td>Starting Number:</td>
      <td><input type="number" id="start" /></td>
    </tr>
    <tr>
      <td>Ending Number:</td>
      <td> <input type="number" id="end" /></td>
    </tr>
    <tr>
      <td> Step:</td>
      <td> <input type="number" id="step" /></td>
    </tr>
    <tr>
      <td><input type="button" onclick="showEvens()" value="View Even Numbers" /></td>
    </tr>
    <tr>
      <td>
        <div id="result"></div>
      </td>
    </tr>
  </table>
</div>