Style-changing handler for an HTML drop-down box

Question

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.

Answer 1

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';
 }
 }
}