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
– Jonathan Lonowski, Commented Mar 17, 2018 at 4: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
– Thomas, Commented Mar 17, 2018 at 4: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
– Mathews Mathai, Commented Mar 17, 2018 at 5: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
– Thomas, Commented Mar 17, 2018 at 5: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); stackoverflow.com/questions/14496531/… — Mathews Mathai
– Mathews Mathai, Commented Mar 17, 2018 at 5:21

Community · Accepted Answer · 2020-06-20 09:12:55Z

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!

Collectives™ on Stack Overflow

While loop and span tag in Javascript is not working

1 Answer 1

EDITED (more complete answer)

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDITED (more complete answer)

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related