Select 更改未传递值

Question

我试图让 function 根据下拉列表中的选择来计算数字在数组中出现的次数。

如果我直接使用favouriteCar(3); 我在控制台中得到 2 的值。

但是，如果我从下拉列表中选择 select，则什么也不会发生。

<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 === value && count++));
        
        return count;

        console.log(count); 
    }
</script>

Answer 1

尝试熟悉addEventListener方法来监听事件。 它更具可预测性，允许您将 HTML 和 JavaScript 分开。 更多信息

也就是说，select 的value将始终表示为字符串。 因此，您必须先将其转换为数字，然后才能在循环中使用它。

在这里使用return没有什么意义，因为您不能使用事件侦听器的结果，所以省略它。 return语句导致 function 以 position 结束，因此return后的所有内容都不会到达。

 const carlikes = [2, 4, 1, 4, 1, 5, 3, 3, 1, 4, 1]; const select = document.querySelector('#cars'); function favouriteCar(event) { const value = Number(event.target.value); var count = 0; carlikes.forEach((v) => (v === value && count++)); console.log(count); } select.addEventListener('change', favouriteCar);

 <label for="cars">Choose a car to see how many people like it:</label> <select name="cars" id="cars"> <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>

Answer 2

您可以使用Array.filter获取该计数，然后获取该length

function favouriteCar(value) {
    const count = carlikes.filter((e) => e === value).length;
    console.log(count);
}

 const carlikes = [2, 3, 1, 4, 2, 5, 3, 3, 1, 2, 1]; const select = document.querySelector('#cars'); function favouriteCar(event) { const value = Number(event.target.value); const count = carlikes.filter((e) => e === value).length; console.log(count); } select.addEventListener('change', favouriteCar);

 <label for="cars">Choose a car to see how many people like it:</label> <select name="cars" id="cars"> <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>