JavaScript function to find even numbers by given step

user_16661586 0
Viewed 275

I'm trying to write a function in JavaScript to complete this exercise. I've got a function written that will display the even numbers. However, I'm having a hard time figuring out how to get the function to display the even numbers by a step like in the example.

Allow a user to enter a starting number an ending number and a step value into three textboxes on a page. A button will be present that when clicked should output all the even numbers between the start and end value. illustration example of exercise

In the example above the user has entered 4 and 20 as the start and end, respectively and set the step to 3. This means the numbers 4, 7, 10, 13, 16, and 19 were considered, but only 4, 10, and 16 were displayed.

This is the code I've written so far:

   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;
   }
numbers find function javascript
1 Answers

You should be incrementing i by step (i += step rather than i++) in your for loop:

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>

Your codepen is not working because value returns a string. You should be using valueAsNumber to get it in integer form:

<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>

user_142512210
Related