如何获取网页中多个文本框的值？前端开发新手求助

嘿，别担心！第一次做Web开发碰到这种问题太正常了，我来一步步帮你搞定～

问题根源 #

你现在遇到的核心问题应该是多个文本框用了同一个id（比如都写了id="comment-block"）。HTML里的id是页面内唯一的标识，用getElementById()方法只能拿到第一个匹配的元素，所以第二个文本框的值自然获取不到啦。

两种实用解决方案 #

方案一：用类名批量获取（推荐，扩展性强）

如果你的需求是有多个同类型的反馈文本框，把重复的id改成class就可以批量获取所有框的值了，以后加更多框也不用改JS代码：

HTML代码

<!-- 把id换成class，多个文本框共用同一个类名 -->
<input type="text" class="comment-block" placeholder="请输入你的反馈1"/>
<input type="text" class="comment-block" placeholder="请输入你的反馈2"/>
<!-- 加个按钮触发获取操作 -->
<button onclick="collectAllComments()">提交所有反馈</button>

JavaScript代码

function collectAllComments() {
  // 获取所有class为comment-block的文本框元素
  const allCommentBoxes = document.querySelectorAll('.comment-block');
  
  // 遍历所有文本框，收集它们的值
  const allComments = [];
  allCommentBoxes.forEach(box => {
    // trim()可以去掉输入内容前后的空格，更干净
    allComments.push(box.value.trim());
  });
  
  // 现在allComments数组里就存了所有文本框的内容啦
  console.log('所有用户反馈：', allComments);
  // 这里可以添加提交到服务器、展示结果等逻辑
}

方案二：给每个文本框设置唯一ID（适合数量固定的场景）

如果你的文本框数量固定，也可以给每个框设置不同的唯一ID，然后单独获取每个的值：

HTML代码

<input type="text" id="comment-block-1" placeholder="请输入你的反馈1"/>
<input type="text" id="comment-block-2" placeholder="请输入你的反馈2"/>
<button onclick="collectSingleComments()">提交反馈</button>

JavaScript代码

function collectSingleComments() {
  // 分别获取每个唯一ID对应的文本框值
  const comment1 = document.getElementById('comment-block-1').value.trim();
  const comment2 = document.getElementById('comment-block-2').value.trim();
  
  console.log('反馈1：', comment1);
  console.log('反馈2：', comment2);
  // 后续可以处理这两个值，比如拼接后提交
}

小提示 #

第一次开发一定要记住：HTML页面中同一个ID只能出现一次，这是最基础的规则之一哦～如果以后还有类似元素批量操作的需求，优先用类名或者标签选择器，会省心很多！

内容的提问来源于stack exchange，提问作者Beauregard Lionett