Style-Changing Handler For a Select Box

Similar to my recently asked question: Style-changing handler for an HTML drop-down box How can I compress down JS and almost automate it?

I tried changing up the old questions answer a bit but never could get it working as i'm very new to JS I mainly do PHP.

So I just need the following JS compressed and automated as much as possible like last question:

```
function seasonChange() {

if(document.getElementById('selectseason').value == "1"){
if(document.getElementById('selectseason1episode').value != "1 - Death Has A Shadow") {
document.getElementById('season1episodes').style.display = 'block';
document.getElementById('season2episodes').style.display = 'none';
document.getElementById('season3episodes').style.display = 'none';
document.getElementById('s1buttons').style.display = 'block';
document.getElementById('s2buttons').style.display = 'none';
document.getElementById('s3buttons').style.display = 'none';
} else {
document.getElementById('season1episode1').style.display = 'inline-block';
document.getElementById('season1episodes').style.display = 'block';
document.getElementById('season2episodes').style.display = 'none';
document.getElementById('season3episodes').style.display = 'none';
document.getElementById('s1buttons').style.display = 'block';
document.getElementById('s2buttons').style.display = 'none';
document.getElementById('s3buttons').style.display = 'none';
}
}

if(document.getElementById('selectseason').value == "2"){
if(document.getElementById('selectseason2episode').value != "1 - Peter, Peter, Caviar Eater") {
document.getElementById('season1episodes').style.display = 'none';
document.getElementById('season2episodes').style.display = 'block';
document.getElementById('season3episodes').style.display = 'none';
document.getElementById('s1buttons').style.display = 'none';
document.getElementById('

Instead of testing the value of the HTML element, pass the season number in as a variable, and then you can use some of that simplifcation magic we used before:

function seasonChange() {

    var seasonNum = document.getElementById('selectseason').value;
    var first_episodes = [
        "1 - Death Has A Shadow",
        "1 - Peter, Peter, Caviar Eater",
        "1 - The Thin White Line"
    ];

    for (var i = 1; i <= first_episodes.length; i++){
        if (document.getElementById('selectseason' + seasonNum + 'episode').value == first_episodes[i - 1]) {
            document.getElementById('season' + seasonNum + 'episode1').style.display = 'inline-block';
        }
        var showOrNot = (seasonNum == i ? 'block' : 'none');
        document.getElementById('season' + i + 'episodes').style.display = showOrNot;
        document.getElementById('s' + i + 'buttons').style.display = showOrNot;
    }

}

This uses the season numbers, to test whether its the one you're switching into or not.

One suggestion I'd make though is that, instead of the first_episodes variable, I'd use a database script, in PHP or something similar, to hit the database for the different episodes/seasons.

That way you can totally move this to the automated paradise you want.

StackExchange Code Review Q#104294, answer score: 4