Question

代码说明：

单击按钮（id = a1）将添加文本输入括号（例如，3次单击将提供3个文本输入）。我试图从所有文本输入中获取值并在页面上显示它，但是，我的代码只打印出第一个文本输入的值。如何让它打印所有文本输入中的所有值？

＆＃13;

// 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;
}

＆＃13;

<!--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>

＆＃13;

Answer 1

我对您的代码进行了一些改进，您可以在下面的代码段中看到。

您需要做出的基本改变是，

使用类选择器而不是ID选择器。当您调用document.getElementById时，它将返回一个具有提供的ID的元素。相反，您需要动态创建的所有文本框。因此，您可以在创建时向输入添加CSS类（class='magnitude-input'），然后使用它来获取所有输入（document.getElementsByClassName('magnitude-input')）。
获得输入列表后，您可以迭代它们并将它们的值收集到一个数组中（在您的情况下为x）。请注意，x应在函数pushData中定义，否则它将保留以前添加到其中的值。
此外，变量a1之后似乎没必要。所以你可以删除它。

// 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>

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

1 个答案: