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

Questions

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

November 26, 2021

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!

>Solution :

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>