Select onChange事件未传值：下拉选车统计数组出现次数失效

你的代码存在两个核心问题，导致下拉菜单选择后无预期反应：

1. console.log永远不会执行 #

函数内return count;写在了console.log(count);之前，一旦执行return语句，函数会立即终止，后续代码完全不会运行。你直接调用favouriteCar(3)时看到的“输出2”，其实是函数的返回值，并非console.log的输出。

2. 类型不匹配导致统计失效 #

下拉菜单传递的this.value是字符串类型（比如选BMW时传的是"3"），而数组carlikes中的元素是数字类型（比如3）。使用严格相等运算符===时，字符串与数字不会匹配，所以统计结果始终为0。

修复后的完整代码 #

<label for="cars">Choose a car to see how many people like it:</label>

<select name="cars" id="cars" onchange="favouriteCar(this.value);">
    <option value="0">Please select a car...</option>
    <option value="1">Audi</option>
    <option value="2">VW</option>
    <option value="3">BMW</option>
    <option value="4">MG</option>
    <option value="5">Suzuki</option>
</select>

<script>
    const carlikes = [2, 4, 1, 4, 1, 5, 3, 3, 1, 4, 1];

    function favouriteCar(value) {
        var count = 0;
        // 将字符串转为数字，解决类型不匹配问题
        carlikes.forEach((v) => (v === Number(value) && count++));
        
        // 先执行输出再返回，确保日志能打印
        console.log(count);
        return count;
    }
</script>

额外优化建议 #

• 用reduce方法可以更简洁地实现统计逻辑：

  function favouriteCar(value) {
      const count = carlikes.reduce((total, v) => v === Number(value) ? total + 1 : total, 0);
      console.log(count);
      return count;
  }
  

• 可以在页面添加显示区域，把统计结果展示在页面上（而非仅控制台输出）：

  <!-- 新增结果展示标签 -->
  <p id="result"></p>
  
  <script>
      function favouriteCar(value) {
          const count = carlikes.reduce((total, v) => v === Number(value) ? total + 1 : total, 0);
          console.log(count);
          // 将结果渲染到页面
          document.getElementById('result').textContent = `喜欢这款车的人数：${count}`;
          return count;
      }
  </script>
  

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