Using Input Number to Update Number of Paragraphs Displayed - HTML Javascript

Question

I'm trying to use a input number type to update how many times a particular amount of content is added to the page. In the example I'm doing it with a p tag but in my main model I'm using it on a larger scale with multiple divs. However, I can't seem to be able to get this to work. If someone can see where I'm going wrong that would be very helpful.

function updatePage() {
  var i = document.getElementById("numerInput").value;
  document.getElementById("content").innerHTML =
    while (i > 1) {
      "<p>Content<p/><br>";
      i--;
    };
}

<input type="number" value="1" id="numberInput">
<br>
<input type="button" value="Update" onclick="updatePage()">
<div id="content">
  <p>Content
    <p>
      <br>
</div>

Scott Marcus · Accepted Answer · 2018-05-30T14:20:11.617

First, you have quite a few problems that need addressing:

You are setting the .innerHTML to a while loop, which is invalid because a loop doesn't have a return value. And, inside your loop, you just have a string of HTML. It isn't being returned or assigned to anything, so nothing will happen with it.

You've also mis-spelled the id of your input:

document.getElementById("numerInput")

Also, don't use inline HTML event attributes (i.e. onclick) as there are many reasons not to use this 20+ year old antiquated technique that just will not die. Separate all your JavaScript work from your HTML.

Lastly, your HTML is invalid:

"<p>Content<p/><br>"

Should be:

"<p>Content</p>"

Notice that in addition to fixing the syntax for the closing p, the <br> has been removed. Don't use <br> simply to add spacing to a document - do that with CSS. <br> should be used only to insert a line feed into some content because that content should be broken up, but not into new sections.

Now, to solve your overall issue, what you should do is set the .innerHTML to the return value from a function or, more simply just the end result of what the loop creates as I'm showing below.

// Get DOM references just once in JavaScript
let input = document.getElementById("numberInput");
let btn = document.querySelector("input[type='button']");

// Set up event handlers in JavaScript, not HTML with standards-based code:
btn.addEventListener("click", updatePage);

function updatePage() {
  var output = ""; // Will hold result
  
  // Instead of a while loop, just a for loop that counts to the value entered into the input
  for (var i = 0; i < input.value; i++) {
    // Don't modify the DOM more than necessary (especially in a loop) for performance reasons
    // Just build up a string with the desired output
    output += "<p>Content</p>"; // Concatenate more data
  };
  
  // After the string has been built, update the DOM
  document.getElementById("content").innerHTML = output;
}

<input type="number" value="1" id="numberInput">
<br>
<input type="button" value="Update">
<div id="content">
  <p>Content</p>
</div>

And, if you truly do want the same string repeated the number of times that is entered into the input, then this can be a lot simpler with string.repeat().

// Get DOM references just once in JavaScript
let input = document.getElementById("numberInput");
let btn = document.querySelector("input[type='button']");

// Set up event handlers in JavaScript, not HTML with standards-based code:
btn.addEventListener("click", updatePage);

function updatePage() {
  // Just use string.repeat()
  document.getElementById("content").innerHTML = "<p>Content</p>".repeat(input.value);
}

<input type="number" value="1" id="numberInput">
<br>
<input type="button" value="Update">
<div id="content">
  <p>Content</p>
</div>

Alex · Answer 2 · 2018-05-30T14:12:49.810

As @ScottMarcus pointed out you had the following issues:

While Loops do not need a ; at the end of while(args) {}
Your .innerHTML code was in the wrong place
You had a typo in getElementById("numerInput") which I changed to getElementById("numberInput")

Code

  function updatePage() {
    // Get input value
    var numberInput = document.getElementById("numberInput").value;

    // Will be used to store all <p> contents
    var template = "";

    while (numberInput > 0) {
      // Add all contents into template
      template += "<p>Content<p/><br>";

      numberInput--;
    }
    // Append upon clicking
    document.getElementById("content").innerHTML = template;
  }

<input type="number" value="1" id="numberInput">
<br>
<input type="button" value="Update" onclick="updatePage()">
<div id="content">
</div>

Please don't post code to 3rd party sites as those links can die over time. Just edit your answer and place your executable code in a "code snippet" and then it will be able to be run right here. — Scott Marcus, May 30 '18 at 14:09

Using Input Number to Update Number of Paragraphs Displayed - HTML Javascript

2 Answers2