I'm a beginner yet, and currently I'm making a site about The Flash (just to practice), and yesterday I figured out this code to make my next/previous (episode) buttons work correctly. I'm glad I found a way after hours, but unfortunatelly it's pretty long.

So I'm wondering if someone could offer me a shorter code for this? How could I simplify it?

HTML code

I have 23 of these divs

<div id="episode1buttons">
<button id="episode1none">-</button>
<button id="episode1next" onclick="S1E2()">Next episode</button>
</div>
<div id="episode2buttons">
<button id="episode2previous" onclick="S1E1()">Previous episode</button>
<button id="episode2next" onclick="S1E3()">Next episode</button>
</div>
<div id="episode3buttons">
<button id="episode3previous" onclick="S1E2()">Previous episode</button>
<button id="episode3next" onclick="S1E4()">Next episode</button>
</div>

Css is not important, all I did there, that I set a default display:none; for these divs

and the JS

function S1E1(){
 document.getElementById("episode1buttons").style.display="block";
 document.getElementById("episode2buttons").style.display="none";
 document.getElementById("episode3buttons").style.display="none";
 document.getElementById("episode4buttons").style.display="none";
 document.getElementById("episode5buttons").style.display="none";

function S1E2(){
 document.getElementById("episode2buttons").style.display="block";
 document.getElementById("episode1buttons").style.display="none";
 document.getElementById("episode3buttons").style.display="none";
 document.getElementById("episode4buttons").style.display="none";
 document.getElementById("episode5buttons").style.display="none";

and there are more, but unecessary codes to them yet

I'm not sharing much code, because I don't want to make it too long

There are 23 functions like this, and in each of them, I set display:none; for 22 div-s, and display:block; for the one that contains the proper buttons that belong to the episode

And it's working, but it's pretty long(overall:529 lines of codes)

Feel free to ask if I missed something or you don't understand something!

Some points

Event listeners

When adding event listeners it is considered bad practice to add them in the page content.

You had

<button id="episode1next" onclick="S1E2()">Next episode</button>

Instead use addEventListener

const elem = document.getElementById("episode1next");
elem.addEventListener("click",S1E2); // remove the "on" from event name
 // point to the function (no () after function name) 
 // DONT call the function (has () after function name)

Naming

Use a well defined naming convention, and use it consistently.

Each language has a set of conventions that define how you create names for various things. In JavaScript we use lower camelCase for everything except objects that you create with the new token, for which we use upper CamelCase

Unfortunately JavaScript shares its environment with the DOM (HTML and CSS) and they have a completely different naming convention called BEM, which is incompatible with JS (you can not use BEM names in JS as they break syntax rules) Article regarding BEM and CSS

Ideally you use the correct naming convention for the correct content and learn how to convert between them (when its automatic, when not automatic, and the exceptions) eg CSS font-size becomes JS fontSize, element data attributes are automatically camelCased, ,any element attribute values (like ids) are not converted and may need to use indirect queries or bracket referencing.)

You will note that these are conventions. Some (like me) opt to follow only one convention. JS camelCase, using it in the DOM and CSS for all names I define. This is not main stream.

You have followed no apparent naming convention and that will make it very hard to know when and where to put capitals, '-' etc. You remember a variable by name, that for mere mortals does not include the naming format.

Use class

If you find your self setting class properties directly to elements you should give a moments time and consider if it is done better using a CSS rule.

You do the following

document.getElementById("episode1buttons").style.display="block";
document.getElementById("episode2buttons").style.display="none";

But it would be better if you create a CSS rule hide and apply that rule to the elements class

 /* CSS rule in CCS */
 .hide display : none; 

 // Unhide and hide elements in JS
 document.getElementById("episode1buttons").classList.remove("hide");
 document.getElementById("episode2buttons").classList.add("hide");

A generic event listener

You have a list of objects related to a TV show. You have coded it by hand for each particular episode which is laborious, prone to error, and just a painful time consuming process.

Using your naming we can improve the code complexity by having only one event listener that can deduce what the click is for and what to do with it.

For this we wrap everything that needs a click event in a containing element ( element id episodes) For each clickable element we add data we can use to determine what to do with the click. (data-clickType and data-episode)

We set up the initial visibility of episodes in the HTML.

<div id="episodes">
 <div id="episode1buttons">
 <button id="episode1none" data-clickType="none">-</button>
 <button id="episode1next" data-clickType="next" data-episode="1">Next episode</button>
 </div>
 <div id="episode2buttons" class ="hide"> <!-- note this is hidden -->
 <button id="episode2previous" data-clickType="prev" data-episode="2">Previous episode</button>
 <button id="episode2next" data-clickType="next" data-episode="2">Next episode</button>
 </div>
 <div id="episode3buttons" class ="hide"> <!-- note this is hidden -->
 <button id="episode3previous" data-clickType="prev" data-episode="3">Previous episode</button>
 <button id="episode3next" data-clickType="next" data-episode="3">Next episode</button>
 </div>**strong text**
</div>

Then in javascript add an event listener to the containing element

episodes.addEventListener("click",episodeClick);

And create a listener function that works out what to do with the click

function episodeClick(event)
 var dir = 0; // forward or backward
 if (event.target.dataset.clickType === "prev") dir = -1 
 if (event.target.dataset.clickType === "next") dir = 1 
 // only if there is a dir
 if (dir) 
 const epNumber = Number(event.target.dataset.episode); // convert to a number
 let elementName = `episode$epNumberbuttons`; // get element id to hide
 // hide the element
 document.getElementById(elementName).classList.add("hide"); // hide this element 
 epNumber += dir; // get next or prev episode
 elementName = `episode$epNumberbuttons`; // get element id to show 
 // show the element
 document.getElementById(elementName).classList.remove("hide");
 

Now you can add to the HTML as many episodes as you like, and don't need to change the code saving you a lot of time, and reducing the chance of bugs creeping in due to typos just because there has been a content change.