报错testBtn.addEventListener is not a function，求按钮存下拉值到数据库方案

错误原因拆解 #

• document.getElementsByClassName() 返回的是HTMLCollection类数组集合，不是单个DOM元素，直接调用addEventListener自然会报错。
• 你给addEventListener传的第二个参数是console.log(brandOfCar.value)，这会在页面加载时立即执行，而非点击按钮时触发，正确姿势是传入一个函数。
• brandOfCar获取的是带custom-select类的div容器，不是里面的<select>元素，根本拿不到value属性。

修改后的代码 #

JavaScript 部分

// 获取按钮元素（取集合里的第一个）
const testBtn = document.getElementsByClassName('test')[0];
// 精准获取select元素
const carSelect = document.querySelector('.custom-select select');

// 绑定点击事件
testBtn.addEventListener("click", function() {
  // 拿到选中项的value和文本
  const selectedValue = carSelect.value;
  const selectedText = carSelect.options[carSelect.selectedIndex].text;
  
  console.log('选中值：', selectedValue);
  console.log('选中文本：', selectedText);
  
  // 这里写存数据库的逻辑，比如调用后端接口
  // fetch('/your-api-url', {
  //   method: 'POST',
  //   body: JSON.stringify({ value: selectedValue, text: selectedText }),
  //   headers: { 'Content-Type': 'application/json' }
  // });
});

HTML 部分（保持原结构即可）

<div class="custom-select" style="width:200px;">
    <select>
      <option value="0">Select car:</option>
      <option value="1">Audi</option>
      <option value="2">BMW</option>
      <option value="3">Citroen</option>
      <option value="4">Ford</option>
      <option value="5">Honda</option>
      <option value="6">Jaguar</option>
      <option value="7">Land Rover</option>
      <option value="8">Mercedes</option>
      <option value="9">Mini</option>
      <option value="10">Nissan</option>
      <option value="11">Toyota</option>
      <option value="12">Volvo</option>
    </select>
   
<button class="test">test</button>
</div>

补充提示 #

如果页面存在多个同类元素，记得用索引或更精准的选择器（比如querySelector）定位目标；存数据库时，确保请求参数、方法和后端接口要求匹配就行。

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