如何使用JavaScript获取多个文本输入框的值并打印数组列表？

你遇到的问题核心在于所有新增的输入框都使用了同一个id="a1"——DOM规范里id是元素的唯一标识，document.getElementById('a1')只会返回第一个匹配的元素，这就是为什么你只能拿到第一个输入框的值。

下面我们通过两处关键改动来解决这个问题：

1. 移除重复ID，改用class统一标识输入框 #

添加输入框时，不再给每个框设置重复的id，而是用class来标记这类输入框，比如class="load-input"，这样就能批量选中所有同类型的输入框。

2. 修改pushData函数，批量收集所有输入框的值 #

通过document.querySelectorAll('.load-input')获取所有目标输入框，遍历它们并把值收集到数组中。

修改后的完整代码 #

JavaScript 部分

var x = [];
function addInput() {
  // 用class替代重复id，统一标识输入框
  document.getElementById('text').innerHTML += "Load magnitude <input type='text' class='load-input' value=''/><br />";
}

function pushData() {
  // 清空数组，避免重复累加旧值
  x = [];
  // 获取所有class为load-input的输入框
  const inputs = document.querySelectorAll('.load-input');
  // 遍历收集每个输入框的值
  inputs.forEach(input => {
    // 可选：过滤空输入，避免数组里出现空字符串
    if (input.value.trim()) {
      x.push(input.value);
    }
  });
  // 用逗号分隔数组内容，让显示更友好
  document.getElementById('pText').innerHTML = x.join(', ');
}

HTML 部分

<!--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="Add input" 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>

额外优化说明 #

• 删掉了原来的a1计数器，现在不需要通过id区分输入框，这个变量就没用啦
• 增加了空值过滤逻辑，如果你希望保留空输入，可以去掉if (input.value.trim())这一行
• 用join(', ')替代直接输出数组，让页面显示的内容更易读

内容的提问来源于stack exchange，提问作者Royston Teo