4
\$\begingroup\$

How can I maybe do some loop that will compress the amount of JavaScript/jQuery I need to use. I have a function s3episodesChange() linked to a <select> tag. This <select> tag has a few different selectable values that change style properties of various different <button> tags.

All it is doing is showing the appropriate button and making sure all other buttons are hidden well before showing a new one. It also makes sure that when you load the page it will show the first button tied to the first select tags value.

Have a look at my code and tell me what steps I could possibly take to try and achieve this using less overall code.

function season3episodesChange() {

//Episodes:
var episode1 = "1 - The Thin White Line";
var episode2 = "2 - Brian Does Hollywood";
var episode3 = "3 - Mr. Griffin Goes to Washington";
var episode4 = "4 - One If by Clam, Two If by Sea";
var episode5 = "5 - And the Wiener Is...";
var episode6 = "6 - Death Lives";
var episode7 = "7 - Lethal Weapons";
-------------------/\---------------------------
//There are 22 total vars just I cut most of them out.

var selectseason3episode = document.getElementById('selectseason3episode');
var season3episode1 = document.getElementById('season3episode1');

if(selectseason3episode.value == episode1){
    season3episode1.style.display = 'inline-block';
} else { document.getElementById('season1episode1').style.display = 'none'; }

if(selectseason3episode.value == episode2){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode2').style.display = 'inline-block';
} else { document.getElementById('season3episode2').style.display = 'none'; }

if(selectseason3episode.value == episode3){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode3').style.display = 'inline-block';
} else { document.getElementById('season3episode3').style.display = 'none'; }

if(selectseason3episode.value == episode4){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode4').style.display = 'inline-block';
} else { document.getElementById('season3episode4').style.display = 'none'; }

if(selectseason3episode.value == episode5){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode5').style.display = 'inline-block';
} else { document.getElementById('season3episode5').style.display = 'none'; }

if(selectseason3episode.value == episode6){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode6').style.display = 'inline-block';
} else { document.getElementById('season3episode6').style.display = 'none'; }

if(selectseason3episode.value == episode7){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode7').style.display = 'inline-block';
} else { document.getElementById('season3episode7').style.display = 'none'; }

if(selectseason3episode.value == episode8){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode8').style.display = 'inline-block';
} else { document.getElementById('season3episode8').style.display = 'none'; }

if(selectseason3episode.value == episode9){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode9').style.display = 'inline-block';
} else { document.getElementById('season3episode9').style.display = 'none'; }

if(selectseason3episode.value == episode10){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode10').style.display = 'inline-block';
} else { document.getElementById('season3episode10').style.display = 'none'; }

if(selectseason3episode.value == episode11){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode11').style.display = 'inline-block';
} else { document.getElementById('season3episode11').style.display = 'none'; }

if(selectseason3episode.value == episode12){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode12').style.display = 'inline-block';
} else { document.getElementById('season3episode12').style.display = 'none'; }

if(selectseason3episode.value == episode13){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode13').style.display = 'inline-block';
} else { document.getElementById('season3episode13').style.display = 'none'; }

if(selectseason3episode.value == episode14){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode14').style.display = 'inline-block';
} else { document.getElementById('season3episode14').style.display = 'none'; }

if(selectseason3episode.value == episode15){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode15').style.display = 'inline-block';
} else { document.getElementById('season3episode15').style.display = 'none'; }

if(selectseason3episode.value == episode16){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode16').style.display = 'inline-block';
} else { document.getElementById('season3episode16').style.display = 'none'; }

if(selectseason3episode.value == episode17){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode17').style.display = 'inline-block';
} else { document.getElementById('season3episode17').style.display = 'none'; }

if(selectseason3episode.value == episode18){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode18').style.display = 'inline-block';
} else { document.getElementById('season3episode18').style.display = 'none'; }

if(selectseason3episode.value == episode19){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode19').style.display = 'inline-block';
} else { document.getElementById('season3episode19').style.display = 'none'; }

if(selectseason3episode.value == episode20){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode20').style.display = 'inline-block';
} else { document.getElementById('season3episode20').style.display = 'none'; }

if(selectseason3episode.value == episode21){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode21').style.display = 'inline-block';
} else { document.getElementById('season3episode21').style.display = 'none'; }

if(selectseason3episode.value == episode22){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode22').style.display = 'inline-block';
} else { document.getElementById('season3episode22').style.display = 'none'; }

}

Note: The JavaScript is being loaded on the script tag like so:

<select onload="javascript:season1episodesChange()" onchange="javascript:season1episodesChange()">

I have onload so that it loads the season1 episode1 button when the page loads. I haven't actually tested if it even needs to be there, but I'm pretty sure it does.

\$\endgroup\$
3
\$\begingroup\$

Instead of having individual variables for each episode, and then iterating over all of them, use an array.

By using an array, you can use a for loop to iterate over all of them, turning the potentially massive amount of loops into one loop:

function season3episodesChange() {

    //Episodes:
    var episodes = [
        "1 - The Thin White Line",
        "2 - Brian Does Hollywood",
        "3 - Mr. Griffin Goes to Washington",
        "4 - One If by Clam, Two If by Sea",
        "5 - And the Wiener Is...",
        "6 - Death Lives",
        "7 - Lethal Weapons"
    ];

    var selectseason3episode = document.getElementById('selectseason3episode');

    for (var i = 1; i <= episodes.length; i++){
        if (selectseason3episode.value == episodes[i - 1]){
            document.getElementById('season3episode'+ i).style.display = 'inline-block';
        } else {
            document.getElementById(['season3episode' + i].join('')).style.display = 'none';
        }
    }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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