How to Create a Text Box Dynamically in JavaScript

How to Create a Text Box Dynamically in JavaScript, in this blog post ,I will step through on how to create a text box dynamically when the User input a numerical value into the Text Box.

The App that we will be creating is as below:

Document

Dynamically Generate TextBox Base on Inputted Numerical Value

Input Number Of Text Box you want to create

To App is divided into 2 Parts

HTML
Javascripts

HTML Code

For HTML , there are 2 things we will need to Create

(1) An Input Text Box , assign with an id -> “id_TextBox”

(2) The Text Box is assigned to a Function -> “genTextBox ” with On change feature

(3) We Will code the ” genTextBox ” function later in the JavaScript Portion .

(4) Onchange will call the genTexBox Function when detect there are changes being made to the Text Box

(5) Assign an Empty un order list with an id -> “id_input”

HTML Code As below

<body>
<h2>Dynamically Generate TextBox Base on Inputted Numerical Value</h2>

<P>Input Number Of Text Box you want to create </p>
    <br>
    <!-----------------------Input Text Box------------------------------------>
    <input type="text" class ="" id="id_TextBox" onchange= "genTextBox() "/>    
    <br>
    <!-----------------------Un Orderlist to be append Later------------------------------------>
    <ul id="id_input">


    </ul>



    
</body>

JavaScript Code

Every time when the Textbox detect Changes it will call the Function “genTextBox”

Code As Below

var inputValue =0;
var textAppId=0;
var temp_1 =0;

const genTextBox=()=>{

     // Delete Everything 
     let menu = document.getElementById('id_input');
     while (menu.firstChild) {
            menu.removeChild(menu.firstChild);
        }
    // Clear Value
    inputValue =0;


    // Get UL Value
    var ul = document.getElementById("id_input"); 
    
    // Get Text Box Input Value
    inputValue = document.getElementById("id_TextBox").value;  


    for (var i = 0; i < inputValue  ; i++) {


          //--------------Create List Element ------------------------------
          var li = document.createElement('li');
      
          //---------------Create Unique ID For Test Box---------------------
             textAppId="";
             
             temp_1=0;
             temp_1 = i+1;
             textAppId ="text"+temp_1;
 
         //--------------------------------------------------------------------
                const input_M = document.createElement("input");
                
                input_M.setAttribute("id",textAppId);
           
                input_M.setAttribute("type", "text");
                

                li.appendChild(input_M);

          // Append LI to Unorder List ---------------------------------------

                 ul.appendChild(li);







    }




};

Check Out Finding all possible combinations of numbers to reach a given sum JavaScript. Here

CreatifWerks

How to Create a Text Box Dynamically in JavaScript