如何从同class的多个input输入框取值？解决返回undefined问题

• document.querySelectorAll('.quantity')返回的是包含所有匹配class元素的NodeList节点集合，不是单个DOM元素，集合本身不存在value属性，直接读取quantity.value必然返回undefined。
• 原有逻辑没有绑定「当前点击的提交按钮」和「对应输入框」的关联关系，就算遍历NodeList集合，也无法精准拿到用户当前操作那组的输入值。
• 额外冗余问题：CSS中.overlay选择器重复写了两次display: none，不影响功能但属于无效冗余代码；所有输入框、按钮的name属性完全重名，原生表单提交时会出现值覆盖问题。

核心逻辑：点击提交按钮时，通过DOM关系定位到和当前按钮配对的单个输入框，再读取这个输入框的value即可。
根据你现有的DOM结构（输入框紧邻在对应提交按钮的前面），修复后的完整JS代码如下：

const overlay = document.querySelector('.overlay');
const overlayBtn = document.querySelector('.overlay-btn');
const amtBtn = document.querySelectorAll('.amt-btn');

overlayBtn.addEventListener('click', function(){
  overlay.style.display = "block";
});

amtBtn.forEach(function(btn){
  btn.addEventListener('click', function(e){
    e.preventDefault();
    // 定位当前点击按钮紧邻的上一个兄弟元素，即配对的数量输入框
    const currentQuantityInput = btn.previousElementSibling;
    const getQuantity = currentQuantityInput.value;
    // 如果后续需要做数值计算，记得把字符串值转成数字类型：const getQuantity = Number(currentQuantityInput.value)
    console.log(getQuantity);
  });
});

可选优化建议 #

• 如果后续可能调整DOM结构，相邻兄弟选择器的容错率较低，可以给每一组「输入框+提交按钮」套一个独立的父级标签（比如<div class="form-row"></div>），点击按钮时通过btn.closest('.form-row').querySelector('.quantity')定位输入框，结构变动也不会影响逻辑。
• 给多组输入框设置不同的name属性（比如quantity_0/quantity_1依次递增），避免表单提交时值互相覆盖。
• 删除CSS里.overlay下重复的display: none声明。

内容的提问来源于stack exchange，提问作者gamer beast