如何使用javascript从多个文本输入中打印数组列表？

Question

Code description:

Clicking the button (id=a1) will add text input brackets (eg 3 clicks will give 3 text input). I am trying to get the values from all the text inputs and show it on the page,however, my code only prints out the value from the first text input. How can I get it to print all the values from all the text inputs?

 // add textbox function onclick var a1 = 0; var x = []; function addInput() { document.getElementById('text').innerHTML += "Load magnitude <input type='text' id='a1' value=''/><br />"; a1 += 1; } //Adds inout into list var x function pushData() { //get value from input text var inputText = document.getElementById('a1').value; //append data to the array x.push(inputText); var pval = x; document.getElementById('pText').innerHTML = pval; } 

 <!--Loadtype selection--> <div class="test"> Load type:<br> <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg" width="50 height=" 50 alt="unfinished bingo card" onclick="addInput()" /> <br><br> </div> <p id="text"></p> <button onclick="pushData();">Submit</button> <p id="pText">List from input inserted here!</p> <p id="pText2">value of a1</p> 

Answer 1

I have made a couple of improvements to your code, that you can see in the code snippet below.

The essential changes you need to make would be,

• Use a class selector instead of ID selector. When you invoke document.getElementById it returns one element having the provided ID. Instead you want all the textboxes that were dynamically created. So you can add a CSS class to the input at the time of creation ( class='magnitude-input' ) and afterwards use it to get all inputs ( document.getElementsByClassName('magnitude-input') ).

• Once you get a list of inputs, you can iterate over them and collect their values into an array ( x in your case). Note that x should be definied within the function pushData , otherwise it will retain values previously added to it.

• Also, the variable a1 seems unnecessary after that. So you can remove it.

 // add textbox function onclick function addInput() { document.getElementById('text').innerHTML += "Load magnitude <input type='text' class='magnitude-input' value=''/><br />"; } //Adds inout into list var x function pushData() { var x = []; //get value from input text var inputs = document.getElementsByClassName('magnitude-input'); for(var i = 0; i < inputs.length; i++) { var inputText = inputs[i].value; //append data to the array x.push(inputText); } document.getElementById('pText').innerHTML = x; } 

 <!--Loadtype selection--> <div class="test"> Load type:<br> <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg" width="50 height=" 50 alt="unfinished bingo card" onclick="addInput()" /> <br><br> </div> <p id="text"></p> <button onclick="pushData();">Submit</button> <p id="pText">List from input inserted here!</p> <p id="pText2">value of a1</p>