List of TV show episodes, with next/previous episode links for each entry
Some points

Event listeners

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

You had 


&lt;button id="episode1next" onclick="S1E2()"&gt;Next episode&lt;/button&gt;



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.

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


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${epNumber}buttons`; // 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${epNumber}buttons`; // 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.