CODEWITHSUNDEEP
javascripthtml
Nancy Schroepfer
Nancy Schroepfer

Reputation: 57

While loop and span tag in Javascript is not working

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>

Upvotes: 0

Views: 479

Answers (1)

n8jadams
n8jadams

Reputation: 1164

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>

Upvotes: 1

Related Questions