点击#grabValues按钮获取输入值存入数组计算总时长的JS问题

嘿，我来帮你搞定这个问题！你现在遇到的点击按钮只能拿到第一个输入框值的情况，大概率是因为获取元素的方式没选对，咱们一步步来解决：

1. 先纠正输入框的获取方式 #

如果你之前用了document.querySelector('input')，那它只会返回匹配到的第一个输入框元素。要获取所有输入框，得改用document.querySelectorAll('input')——这个方法会返回所有匹配的元素集合，咱们把它转成数组就能遍历处理了。

比如可以用扩展运算符快速转数组：

const inputElements = [...document.querySelectorAll('input')];

或者用Array.from()：

const inputElements = Array.from(document.querySelectorAll('input'));

如果你的输入框有特定标识（比如类名duration-input），可以把选择器写得更精准，避免拿到无关的输入框：

const inputElements = [...document.querySelectorAll('.duration-input')];

2. 编写按钮点击的完整逻辑 #

把这段代码放到你的外部JS文件里，记得加上DOM加载完成的监听（避免脚本执行时DOM还没渲染好）：

// external.js 内容
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const grabBtn = document.getElementById('grabValues');
  
  // 绑定点击事件
  grabBtn.addEventListener('click', function() {
    // 获取所有目标输入框并转成数组
    const inputElements = [...document.querySelectorAll('input')];
    
    // 提取每个输入框的值，存入数组（这里做了简单校验，空值转0）
    const valuesArray = inputElements.map(input => {
      const trimmedValue = input.value.trim();
      // 如果是时长，建议转成数字，方便后续计算
      return trimmedValue ? parseFloat(trimmedValue) : 0;
    });
    
    // 计算总时长
    const totalDuration = valuesArray.reduce((total, current) => total + current, 0);
    
    // 测试输出，你可以换成自己的业务逻辑
    console.log('所有输入框的值数组:', valuesArray);
    console.log('总时长:', totalDuration);
  });
});

3. 正确加载外部JS文件 #

按照你的计划，把这个外部JS文件放在body标签的末尾加载，这样能确保脚本执行时，页面上的按钮和输入框都已经渲染完成：

<!-- HTML结构示例 -->
<body>
  <!-- 你的输入框、按钮等DOM元素 -->
  <input type="number" placeholder="时长1">
  <input type="number" placeholder="时长2">
  <button id="grabValues">获取值并计算</button>
  
  <!-- 在body最后引入外部JS -->
  <script src="external.js"></script>
</body>

上面的代码里已经加了DOMContentLoaded监听，就算不小心把脚本放到head里也能正常工作，但还是推荐放在body末尾，更稳妥。

4. 额外排查点 #

• 确认选择器是否精准：如果页面上有其他无关的输入框，一定要用更具体的选择器（比如类名、type属性）来筛选目标输入框。
• 处理无效值：如果用户输入了非数字内容，parseFloat会返回NaN，你可以加个判断，比如如果不是有效数字就跳过或者提示用户。

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