jQuery按钮点击时向数组推入参数返回undefined问题排查

哥们，我太懂你这种踩坑的感觉了！之前帮好几个开发者解决过几乎一模一样的问题，咱们一步步把bug揪出来：

先说说你遇到的两种奇怪现象 #

1. 控制台返回#makeIn、#yearIn #

这百分百是你没调用.val()方法！比如你可能写了：

let carMake = $('#makeIn'); // 这里carMake是jQuery选择器对象，不是输入框的值

当你把这个对象直接push进数组，它转成字符串就是[object Object]或者你看到的选择器字符串，正确写法必须加.val()：

let carMake = $('#makeIn').val(); // 这才是输入框里的文本内容

2. 控制台返回undefined #

这种情况大概率是下面两个原因之一：

• DOM还没加载完成，代码就执行了：如果你的jQuery代码写在<head>标签里，这时候页面上的输入框还没渲染出来，$('#makeIn')找不到元素，调用.val()自然返回undefined。
• 选择器写错了：比如输入框的id是make-in你写成了makeIn，或者把class的.写成了id的#（反过来也一样），大小写也要注意——jQuery选择器是大小写敏感的！

给你一套完整的正确写法 #

直接抄这个示例，对应改你的id就行：

<!-- 先写页面元素 -->
<input type="text" id="makeIn" placeholder="输入汽车品牌">
<input type="text" id="yearIn" placeholder="输入生产年份">
<button id="addBtn">添加到数组</button>

<!-- 先引入jQuery，再写业务代码 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// 必须等DOM完全加载再绑定事件
$(document).ready(function() {
  // 把数组放在外面，不然每次点击都会重置为空
  let carList = [];

  $('#addBtn').click(function() {
    // 获取输入值，顺便去掉首尾空格
    let make = $('#makeIn').val().trim();
    let year = $('#yearIn').val().trim();

    // 先判断输入是否为空，避免存空值
    if (make && year) {
      // 存成对象比存单独字符串更清晰，后续好用
      carList.push({
        brand: make,
        productionYear: year
      });
      console.log('当前数组内容:', carList);
      // 清空输入框，提升用户体验
      $('#makeIn').val('');
      $('#yearIn').val('');
    } else {
      console.log('请填写完整的品牌和年份哦！');
    }
  });
});
</script>

额外提醒：如果是动态生成的按钮 #

要是你的按钮是后来通过JS动态添加到页面的，直接用$('#addBtn').click()会失效，这时候得用事件委托：

// 把事件绑定到document上，监听动态元素的点击
$(document).on('click', '#addBtn', function() {
  // 里面的逻辑和上面一样
});

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