Select on change not passing value

LuxyGillan 0
Viewed 42

Im trying to get a function to count the number of times a number appears in an array based on a selection from a dropdown.

If I do it direct with favouriteCar(3); I get a value of 2 in the console.

However if I select from the drop down, nothing happens.

<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>
javascript
2 Answers

Try to get familiar with the addEventListener method to listen to events. It's much more predictable and allows you to separate your HTML and JavaScript. More info

That being said, the value of the select will always be represented as a string. Therefor you must first convert it to a number before using it in your loop.

There is little point to use return here as you can't use the result of your event listener, so omit it. The return statement causes the function to end at that position, so everything after return won't be reached.

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>

Emiel Zuurbier0

you can get that count using Array.filter and then taking that 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>

Nekromenzer0
Related