While loop and span tag in Javascript is not working

Question

I'm working on an HTML coding exercise. The HTML file will let the users input a starting number, an ending number, and a step number. Then output all the even numbers between the starting number and the ending number by the step size after clicking a button. But so far nothing displays after the button is clicked. Also, I tried to insert text into the paragraph using span tags but that doesn't work. Please help. Thank you.

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>

In your snippets, there isn't an element with `id="numbers"` to match `getElementById("numbers")`. Should that reference `"results"` instead? — Jonathan Lonowski, Mar 17 '18 at 04:45
you're confusing strings for numbers so that `adding = adding + step` is a string concatenation and `while (adding < ending)` is a string comparison. And `"100" < "5" === true`. — Thomas, Mar 17 '18 at 04:59
You code may consider one even number which exceeds the limit. For example, `starting=2, ending= 6 and step=3`. First iteration, `2<6 and adding=5` Second iteration, `5<6 and adding=8` and it appends 8 to the string since it's an even number. But 8 exceeds 6. Try this instead: `adding = adding + step; while (adding < ending){ if (adding % 2 == 0){ numbers = numbers+adding + " "; } adding = adding + step; }` — Mathews Mathai, Mar 17 '18 at 05:09
`isNaN` does not determine wether some value itself is *not a number*, it is only determining wether something is explicitely `NaN` (when cast to a number). so `isNaN("5") === false`, `isNaN([ "0xF" ]) === false` even `isNaN({ foo: "lorem ipsum", toString(){ return "" }}) === false` because they all can be **cast to a number** that is **not** `NaN` — Thomas, Mar 17 '18 at 05:10
Also based on what Thomas mentioned: `var starting =parseInt (document.forms["displayEvens"]["starting"].value); var ending = parseInt (document.forms["displayEvens"]["ending"].value); var step = parseInt (document.forms["displayEvens"]["step"].value);` https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum — Mathews Mathai, Mar 17 '18 at 05:21
DRY! store `document.forms["displayEvens"]` in a local variable and use that variable instead of resolving the path over and over again. — Thomas, Mar 17 '18 at 05:45
Thanks for all the comments. I learned so much from this post. :) — Nancy Schroepfer, Mar 17 '18 at 15:11

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

EDITED (more complete answer)

You are reading in value from an input type element. Even though they are type=number, you still need to parse them as ints, or floats. By default they're strings when you read in .value from input elements. Right now you're just adding the step number (which is also as a string) to a string of the adding variable. If starting/adding=1 and the step=1, then it's just concatenating the string, like this:

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

When you're setting the variables and pulling from the DOM elements, just pass them through the parseInt function that's built into javascript.

Also, when I think you MEANT to concatenate, you weren't. (Append the even number to the number string that you're displaying)

number += adding + ' ';

Finally, make sure you're displaying the numbers element in the right id: results.

Here is a fully working example based on what work you did, with the code a little bit dryer and a couple of other nuances caught:

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

@NancySchroepfer Glad to help. Honestly, most important, you should learn how to use `console.log()` and view those logs to help with debugging. Would you please mark my answer as the solution? Thank you! — n8jadams, Mar 17 '18 at 17:37

While loop and span tag in Javascript is not working

1 Answers1

EDITED (more complete answer)