JS开发问题：多按钮与输入框下按innerText状态选值推入数组

我来帮你搞定这个问题！核心就是准确区分元素类型，再按规则获取对应内容，下面直接给你可运行的代码和关键说明：

基础实现方案 #

这个方案适配大多数常规场景（文本输入框、普通按钮），逻辑清晰易维护：

// 创建空数组存储内容
const elementContents = [];

// 一次性获取页面所有button和input元素
const targetElements = document.querySelectorAll('button, input');

// 遍历处理每个元素
targetElements.forEach(el => {
  let content;
  
  // 按标签类型判断，比单纯看innerText更可靠
  if (el.tagName === 'INPUT') {
    // input元素取value，去除首尾空白避免无效内容
    content = el.value.trim();
  } else if (el.tagName === 'BUTTON') {
    // button元素取innerText，同样去除首尾空白
    content = el.innerText.trim();
  }
  
  // 可选：只推送非空内容，避免数组里出现空字符串
  if (content) {
    elementContents.push(content);
  }
});

// 打印结果验证
console.log('收集到的内容：', elementContents);

进阶处理：兼容特殊Input类型 #

如果页面里有复选框、单选框这类特殊input，基础方案可能会收集到默认的on值，这时可以针对性优化：

const elementContents = [];
const targetElements = document.querySelectorAll('button, input');

targetElements.forEach(el => {
  let content = '';
  
  if (el.tagName === 'INPUT') {
    const inputType = el.type.toLowerCase();
    switch(inputType) {
      case 'checkbox':
      case 'radio':
        // 复选/单选框：只收集选中状态的元素值
        content = el.checked ? el.value.trim() : '';
        break;
      case 'file':
        // 文件输入框：收集选中的文件名（按需调整）
        content = el.files.length ? el.files[0].name : '';
        break;
      default:
        // 文本、密码等常规input：取value
        content = el.value.trim();
    }
  } else if (el.tagName === 'BUTTON') {
    content = el.innerText.trim();
  }
  
  if (content) {
    elementContents.push(content);
  }
});

console.log('收集到的内容：', elementContents);

你之前代码可能出错的原因 #

1. 判断逻辑不准确：比如只通过innerText是否为空判断，但有些button可能也会有空白的innerText，容易和input混淆；
2. 未处理空白字符：input里的空格、button里的换行符，会导致innerText看似为空但实际有内容；
3. 遍历方式冗余：比如分别用getElementsByTagName获取button和input，没有统一遍历，容易漏处理元素。

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