Answered Replace very large jS if/elseif/else to show/hide many divs?

[we5inelgr]

Hi Forum,

I've got a page that has a portion of it that displays, or hides, DIV's depending on what option was selected.

There will be around 25 different div's when done, and while developing this I realize that the JS if/else is going to be quite verbose.

For example:

vehicleYearSelect.addEventListener('change', function() {
    if (this.value === '1960') {
        vehicleYear_1960.style.display = 'flex';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
        ...
        [many more years here]
    } else if (this.value === '1961') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'flex';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else if (this.value === '1962') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'flex';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else if (this.value === '1963') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'flex';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else if (this.value === '1964') {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'flex';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    } else {
        vehicleYear_1960.style.display = 'none';
        vehicleYear_1961.style.display = 'none';
        vehicleYear_1962.style.display = 'none';
        vehicleYear_1963.style.display = 'none';
        vehicleYear_1964.style.display = 'none';
        vehicleYear_1965.style.display = 'none';
                ...
        [many more years here]
    }
});

Is there a way to make this more "efficient" in terms of maintainability and having to add new options selected to it?

Example, if I need to add else if (this.value === '1965') and else if (this.value === '1966') to this, I'll need to not only add two more else if's, but also add both of the respective tyle.display = 'none'; or tyle.display = 'flex'; to each of the other existing conditions. etc....

There wont' be very many people using this form as it's not public facing, so speed is not a huge concern here.

Just looking for a way to improve this.

 

[Johna]

Assuming each variable vehicleYear_[year] is an element with an ID like this vehicleYear_[year], and they all have the class name vehicle, you could do something like this:

vehicleYearSelect.addEventListener("change", function() {
  const selectedVehicleYear = document.getElementById(`vehicleYear_${this.value}`);
  const otherVehicleYears = document.querySelectorAll(`.vehicle:not(#vehicleYear_${this.value})`);

  selectedVehicleYear.style.display = "flex";
  otherVehicleYears.forEach((vehicle) => {
    vehicle.style.display = "none";
  });
}

 

[we5inelgr]

Assuming each variable vehicleYear_[year] is an element with an ID like this vehicleYear_[year], and they all have the class name vehicle, you could do something like this:

vehicleYearSelect.addEventListener("change", function() {
  const selectedVehicleYear = document.getElementById(`vehicleYear_${this.value}`);
  const otherVehicleYears = document.querySelectorAll(`.vehicle:not(#vehicleYear_${this.value})`);

  selectedVehicleYear.style.display = "flex";
  otherVehicleYears.forEach((vehicle) => {
    vehicle.style.display = "none";
  });
}

Yeah! That did it. Thank you very much for this suggestion, I really appreciate it.

 

[cbreemer]

In a case like this I would initially set all elements to display none, then only the one I want to flex (no harm in changing a setting twice), using a switch statement rather than an if/else train. This already gets rid of most of the code. This is fine if you have a handful of elements, but if there's a lot of them, of course @Johna 's solution is the better choice. I would then combine the two ideas, so as to get rid of that somewhat arcane CSS selector.