for loop and innerHTML

How do I populate some text with a paragraph using innerHTML? I need to enter a number into the textbox and then repeat some text as many times as the number entered into the textbox.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex10.js</title>
</head>
<body>
    <input type="text" id="input-type" onKeyUp="myFunction()">
    <p id="sample-text">Here is some text</p>
    <script>
        function myFunction() {
            let count = document.getElementById("input-type").value;
            document.getElementById("sample-text").innerHTML = count;

            if (isNaN(count)) {
                document.getElementById("sample-text").innerHTML = "Error. Not a number";
            }
            else {
                for(int i = 0; i < count; i++) {
                    document.getElementById("sample-text").innerHTML = "This is some text";
                }

            }
        }
    </script>
</body>
</html>

3 answers

  • answered 2018-11-16 05:39 essmahr

    document.getElementById("sample-text").innerHTML = someVar;
    

    This will completely overwrite the content of your html element every time you call it, which is probably your problem.

    What you'll want to do instead is build your string beforehand, and then populate the element once afterwards. How about building an array, and then creating a string using join?

    // create your empty array
    var lines = [];
    
    // loop x amount of times and add your text to the array
    for (var i = 0; i < count; i++) {
        lines.push("This is some text");
    }
    
    // convert the array to a string, with each string on its own line
    document.getElementById("sample-text").innerHTML = lines.join("\n");    
    

  • answered 2018-11-16 06:10 Atmiya Kolsawala

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ex10.js</title>
    <script>
         function myFunction() {
            var count = document.getElementById("input-type").value;
    
    
            if (isNaN(count)) {
                document.getElementById("sample-text").innerHTML = "Error. Not a number";
            }
            else {
                 // create your empty array
            var lines = "";
    
            // loop x amount of times and add your text to the array
            for (var i = 0; i < count; i++) {
                lines = lines+"Atmiya\n";
            }
    
            // convert the array to a string, with each string on its own line
            document.getElementById("sample-text").innerHTML = lines;
                }
    
            }
        </script>
    </head>
    <body>
        <input type="text" id="input-type" onKeyUp="myFunction()">
        <p id="sample-text">Here is some text</p>
    
    </body>
    </html>
    

  • answered 2018-11-16 06:28 Will

    There are a few tricks to make it easier:

    <input type="number">

    <input> elements of type "number" are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

    You can also use the += operator to concatenate to an element's innerHTML property.

    onchange is probably better to use than onkeyup. I'm not sure onkeyup works with a touch screen. And the number input box has little controls to change the value.

    function go() {
      let text = document.querySelector('#sample-text').innerHTML;
      let times = document.querySelector('#times').value;
      let output = document.querySelector('#output');
      let ix = 0;
    
      output.innerHTML = '';
    
      while (ix < times) {
        output.innerHTML += text;
        ix++;
      }
    }
    <input type="number" min="1" id="times" onchange="go()">
    <p id="sample-text">Here is some text</p>
    <p id="output"></p>