Loop Function To Let Users Decide How Many Numbers Are Shown in the Input Field-CodePudding

Whenever I come here I always get some solid help and pointers, so I am going to give it a shot while my mind is still grinding through this, and maybe work more on this tomorrow.

Anyway, I am trying to make a function that: Displays the numbers up to the number entered by the user. How many numbers do you want to output? 1 Input field below it.

I have gotten it to count from 0-100, but that is not what it is supposed to do, what am I missing here?

function changeText() {
  var number = document.getElementById('numbersBox').value;
  var result = '';

  for (let i = 0; i < 100; i  ) {
    result  = '<br>'   i;
  }

  document.getElementById('message').innerHTML = result;
}

function clearText() {
  document.getElementById('message').innerHTML = '<br>';
  document.getElementById('numbersBox').value = '';
}

body {
      background-color: #292A2B;
      text-align: center;
      font-family: Montserrat;
      color: #fff;
    }
    
    a {
      color: rgb(27, 157, 218);
    }
    
    #main {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    #header {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    button {
      color: #fff !important;
      text-transform: uppercase;
      text-decoration: none;
      background: #eea825;
      padding: 15px;
      border-radius: 5px;
      display: inline-block;
      border: none;
      transition: all 0.4s ease 0s;
      margin-left: 5em;
      margin-right: 5em;
      box-shadow: inset 0;
    }
    
    button:hover {
      background: #434343;
      letter-spacing: 1px;
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
      transition: all 0.4s ease 0s;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loop Example</title>
  </head>

<body>
  <div id="main">
    <div id="header">
      <h1>Loop Example</h1>
    </div>
    <label for="Form1">
    <form id="myForm">
      <p>This program will display the numbers up to the number entered by the user.</p><br> 
      <p>How many numbers do you want to output?</p><br><br>
      <input type="text" id="numbersBox">
    </form></label>

    <p id="demo">Output:</p><br>
    <p id="message"> <br> </p>

    <button type="button" onClick="changeText()">Submit</button>
    <button type="button" onClick="clearText()">Clear</button>
  </div>
</body>

If anyone can help me in the right direction, thank you so much. Otherwise, Happy Holidays everyone!

CodePudding user response：

You just forgot to compare i against number.

function changeText() {
  var number = document.getElementById('numbersBox').value;
  var result = '';

  for (let i = 0; i < number; i  ) {
    result  = '<br>'   i;
  }

  document.getElementById('message').innerHTML = result;
}

function clearText() {
  document.getElementById('message').innerHTML = '<br>';
  document.getElementById('numbersBox').value = '';
}

body {
      background-color: #292A2B;
      text-align: center;
      font-family: Montserrat;
      color: #fff;
    }
    
    a {
      color: rgb(27, 157, 218);
    }
    
    #main {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    #header {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    button {
      color: #fff !important;
      text-transform: uppercase;
      text-decoration: none;
      background: #eea825;
      padding: 15px;
      border-radius: 5px;
      display: inline-block;
      border: none;
      transition: all 0.4s ease 0s;
      margin-left: 5em;
      margin-right: 5em;
      box-shadow: inset 0;
    }
    
    button:hover {
      background: #434343;
      letter-spacing: 1px;
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
      transition: all 0.4s ease 0s;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loop Example</title>
  </head>

<body>
  <div id="main">
    <div id="header">
      <h1>Loop Example</h1>
    </div>
    <label for="Form1">
    <form id="myForm">
      <p>This program will display the numbers up to the number entered by the user.</p><br> 
      <p>How many numbers do you want to output?</p><br><br>
      <input type="text" id="numbersBox">
    </form></label>

    <p id="demo">Output:</p><br>
    <p id="message"> <br> </p>

    <button type="button" onClick="changeText()">Submit</button>
    <button type="button" onClick="clearText()">Clear</button>
  </div>
</body>

CodePudding user response：

I have edited your snippets, you should pass number as end condition on your for loops

function changeText() {
    var number = parseInt(document.getElementById("numbersBox").value,10);
    var result = "";

    for (let i = 0; i < number; i  ) {
      result  = "<br>"   i;
    }

    document.getElementById("message").innerHTML = (result)
  }

  function clearText() {
    document.getElementById("message").innerHTML = ("<br>");
    document.getElementById("numbersBox").value = "";
  }

body {
      background-color: #292A2B;
      text-align: center;
      font-family: Montserrat;
      color: #fff;
    }
    
    a {
      color: rgb(27, 157, 218);
    }
    
    #main {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    #header {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    button {
      color: #fff !important;
      text-transform: uppercase;
      text-decoration: none;
      background: #eea825;
      padding: 15px;
      border-radius: 5px;
      display: inline-block;
      border: none;
      transition: all 0.4s ease 0s;
      margin-left: 5em;
      margin-right: 5em;
      box-shadow: inset 0;
    }
    
    button:hover {
      background: #434343;
      letter-spacing: 1px;
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
      transition: all 0.4s ease 0s;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loop Example</title>
  </head>

<body>
  <div id="main">
    <div id="header">
      <h1>Loop Example</h1>
    </div>
    <label for="Form1">
    <form id="myForm">
      <p>This program will display the numbers up to the number entered by the user.</p><br> 
      <p>How many numbers do you want to output?</p><br><br>
      <input type="text" id="numbersBox">
    </form></label>

    <p id="demo">Output:</p><br>
    <p id="message"> <br> </p>

    <button type="button" onClick="changeText()">Submit</button>
    <button type="button" onClick="clearText()">Clear</button>
  </div>
</body>