3
\$\begingroup\$

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('s2buttons').style.display = 'block';
        document.getElementById('s3buttons').style.display = 'none';
    } else {
        document.getElementById('season2episode1').style.display = 'inline-block';
        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('s2buttons').style.display = 'block';
        document.getElementById('s3buttons').style.display = 'none';
    }
}

if(document.getElementById('selectseason').value == "3"){
    if(document.getElementById('selectseason3episode').value != "1 - The Thin White Line") {
        document.getElementById('season1episodes').style.display = 'none';
        document.getElementById('season2episodes').style.display = 'none';
        document.getElementById('season3episodes').style.display = 'block';
        document.getElementById('s1buttons').style.display = 'none';
        document.getElementById('s2buttons').style.display = 'none';
        document.getElementById('s3buttons').style.display = 'block';
    } else {
        document.getElementById('season3episode1').style.display = 'inline-block';
        document.getElementById('season1episodes').style.display = 'none';
        document.getElementById('season2episodes').style.display = 'none';
        document.getElementById('season3episodes').style.display = 'block';
        document.getElementById('s1buttons').style.display = 'none';
        document.getElementById('s2buttons').style.display = 'none';
        document.getElementById('s3buttons').style.display = 'block';
    }
}

}

Note: I cant reply to questions about the code but all I will say is the select season . value == 1 bit is season one e.g. I have shown 3 examples but there could be more then 3 seasons so maybe compress and automate using that $i++ variable.

\$\endgroup\$
4
  • \$\begingroup\$ What do you mean by "compressed and automated"? Are you asking how to run the code through a JS minifier? Or do you just want smarter, less repetitive code? \$\endgroup\$
    – 200_success
    Commented Sep 10, 2015 at 3:30
  • \$\begingroup\$ You seem to be mixing presentation and business logic. A better path would be to use CSS for the presentation, and change the active class used based upon the selected season. \$\endgroup\$
    – holroy
    Commented Sep 10, 2015 at 21:44
  • \$\begingroup\$ @holroy no JS would be the better method as the buttons etc will be different depending what get requests you make. So I need to make a automated JS system to change the appropriate CSS \$\endgroup\$
    – John123
    Commented Sep 10, 2015 at 22:04
  • \$\begingroup\$ @John123, Using one class for all these similar elements to group the elements, and one class for hiding and one for display, would separate the presentation from the business logic. You can still implement any differences based on your get requests. In addition you might write simpler code as you could hide all in the group, and then display the one you want to focus/select. \$\endgroup\$
    – holroy
    Commented Sep 14, 2015 at 11:48

1 Answer 1

Reset to default
4
\$\begingroup\$

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.

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.