Replace very large jS if/elseif/else to show/hide many divs? |
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.
How about something like this?
Code: document.getElementById('yearSelect').addEventListener('change', function() { |
Welcome Guest, Not a member yet? Register Sign In |