How to structure code for changing an episode of a series?

Question

Basically I have this code and it is very ugly, I'm a beginner at HTML, CSS and JS so bare with me,

<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E2.mp4';getElementById('s2').innerHTML='Season 2 Episode 2'">
Episode 2
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E3.mp4';getElementById('s2').innerHTML='Season 2 Episode 3'">
Episode 3
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E4.mp4';getElementById('s2').innerHTML='Season 2 Episode 4'">
Episode 4
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E5.mp4';getElementById('s2').innerHTML='Season 2 Episode 5'">
Episode 5
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E6.mp4';getElementById('s2').innerHTML='Season 2 Episode 6'">
Episode 6
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E7.mp4';getElementById('s2').innerHTML='Season 2 Episode 7'">
Episode 7
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E8.mp4';getElementById('s2').innerHTML='Season 2 Episode 8'">
Episode 8
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E9.mp4';getElementById('s2').innerHTML='Season 2 Episode 9'">
Episode 9
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E10.mp4';getElementById('s2').innerHTML='Season 2 Episode 10'">
Episode 10
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E11.mp4';getElementById('s2').innerHTML='Season 2 Episode 11'">
Episode 11
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E12.mp4';getElementById('s2').innerHTML='Season 2 Episode 12'">
Episode 12
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E13.mp4';getElementById('s2').innerHTML='Season 2 Episode 13'">
Episode 13
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E14.mp4';getElementById('s2').innerHTML='Season 2 Episode 14'">
Episode 14
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E15.mp4';getElementById('s2').innerHTML='Season 2 Episode 15'">
Episode 15
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E16.mp4';getElementById('s2').innerHTML='Season 2 Episode 16'">
Episode 16
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E17.mp4';getElementById('s2').innerHTML='Season 2 Episode 17'">
Episode 17
</button>

And it looks so clumped up, and from searching I cant find a way to simplify this code with JS scripts?

I could set a variable let x = document blah blah but that still clumps everything up

Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Store only the _data_ as [`data-*` attributes](//developer.mozilla.org/en/docs/Learn/HTML/Howto/Use_data_attributes), e.g. `data-season="2" data-episode="5"`. — Sebastian Simon, Nov 17 '22 at 22:40
Use [event delegation](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of adding several event listeners — it’s more maintainable and applies to dynamically added elements. See [the tag info](/tags/event-delegation/info) and [this Q&A](/a/55452921/4642212). — Sebastian Simon, Nov 17 '22 at 22:42
Use the [event argument](//developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback): `addEventListener("click", ({`[`target`](//developer.mozilla.org/en/docs/Web/API/Event/target)``}) => { const button = target.closest("[data-season][data-episode]"); if(button){ document.getElementById("my-video2_html5_api").src = `S${button.dataset.season}E${button.dataset.episode}.mp4`; document.getElementById("s2").textContent = `Season ${button.dataset.season} Episode ${button.dataset.episode}`; } });``. — Sebastian Simon, Nov 17 '22 at 22:45

score 0 · Answer 1 · answered Nov 17 '22 at 22:46

Change your HTML to be like this:

<button type="button" class="buttons episode" data-src="S2E2.mp4" data-title="Season 2 Episode 2">
Episode 2

Then you can use a JavaScript loop to assign an event listener to all of them.

function showEpisode(el) {
  document.getElementById('my-video2_html5_api').src = el.dataset.src;
  document.getElementById('s2').innerHTML = el.dataset.title;
}

document.querySelectorAll(".episode.buttons").forEach(el =>
    el.addEventListener("click", e => showEpisode(e.target));

score 0 · Answer 2 · answered Nov 17 '22 at 22:48

You could use a dropdown:

document.getElementById("dropdown").addEventListener("change", (e) => {
    console.log(`user selected ${e.target.value}`);
})

<select id="dropdown">
  <option>Episode 2</option>
  <option>Episode 3</option>
  <option>Episode 4</option>
  <option>Episode 5</option>
  <option>Episode 6</option>
  <option>Episode 7</option>
  <option>Episode 8</option>
  <option>Episode 9</option>
  <option>Episode 10</option>
  <option>Episode 11</option>
  <option>Episode 12</option>
  <option>Episode 13</option>
  <option>Episode 14</option>
  <option>Episode 15</option>
  <option>Episode 16</option>
  <option>Episode 17</option>
</select>

as many people mentioned, it isn't a good idea to use inline event listeners.

Thank you, when I tried to learn dropdowns they looked very complicated so kinda steered me away from them — Minde, Nov 18 '22 at 17:06

score 0 · Answer 3 · answered Nov 17 '22 at 22:53

Absolutely. Make your life easier and use a data attribute (or the like) and a generic button structure. You can even start off with an array of stuff and generate it all...

let episodes = [{
    video: 'S2E1.mp4',
    title: 'Season 2 Episode 1'
  },
  {
    video: 'S2E2.mp4',
    title: 'Season 2 Episode 2'
  }
];

document.addEventListener('DOMContentLoaded', () => {
  let container = document.querySelector('#episodes');
  let api_div = document.getElementById('my-video2_html5_api')
  let title_display = document.getElementById('s2');
  let output = '';
  episodes.forEach(ep => {
    let btitle = ep.title.split(" ").slice(-2).join(" ");
    output += `<button 
           class="buttons episode-btn" 
           data-video="${ep.video}" 
           data-title="${ep.title}">
             ${btitle}
         </button>`
  })
  container.innerHTML = output;

  document.querySelectorAll('.episode-btn').forEach(btn => btn.addEventListener('click', e => {

    // for demonstration:
    return console.log(`play ${e.target.dataset.title}, video: ${e.target.dataset.video}`);

    // real code
    api_div.src = e.target.dataset.video;
    title_display.innerHTML = e.target.dataset.title
  }))

})

<div id='episodes'></div>

score 0 · Answer 4 · answered Nov 17 '22 at 22:55

You can use data-(name) Attribute and EventListener

let buttons = document.querySelectorAll('.buttons');
buttons.forEach((button) => {
    button.addEventListener('click', (e) => {
        let season = button.getAttribute('data-season');
        let episode = button.getAttribute('data-episode');
        // document.getElementById('my-video2_html5_api').src = `S${season}E${episode}.mp4`;
        // getElementById('s2').innerHTML = `Season ${season} Episode ${episode}`;

        console.log(`Video name: S${season}E${episode}.mp4`);
        console.log(`Text to display: Season ${season} Episode ${episode}`);
    })
})

<button type="button" class="buttons" data-season='2' data-episode='1'>
    Episode 1
</button>
<button type="button" class="buttons" data-season='2' data-episode='2'>
    Episode 2
</button>
<button type="button" class="buttons" data-season='2' data-episode='3'>
    Episode 3
</button>
<button type="button" class="buttons" data-season='2' data-episode='4'>
    Episode 4
</button>
<button type="button" class="buttons" data-season='2' data-episode='5'>
    Episode 5
</button>

damonholden · Answer 5 · 2022-11-17T23:24:35.653

-1

could use a purely JavaScript approach with a .map() array method and a Template string:

document.getElementById('episodesContainer').innerHTML = episodesArray
  .map(
    (value) => `<button 
type="button" 
class="buttons" 
onclick="document.getElementById('my-video2_html5_api')
.src = 'S${value.season}E${value.episode}.mp4';getElementById('s${value.season}')
.innerHTML='$Season ${value.season} Episode ${value.episode}'"
>
Episode ${value.episode}
</button>
`
  )
  .join('');

Of course, in this example, the 'episodesContainer' string would be replaced with whatever element you would want to contain these buttons.

Hope this helps.

edited Nov 17 '22 at 23:24

answered Nov 17 '22 at 23:02

damonholden

1,062
4
17

Please _never_ suggest or encourage attributes such as `onclick`. See the many reasons in my comments above. The last browser that still needs them reached end of life nearly two decades ago. – Sebastian Simon Nov 17 '22 at 23:05
I'm not suggesting or encouraging anything, I'm just simply answering the question with a valid solution. – damonholden Nov 17 '22 at 23:07

How to structure code for changing an episode of a series?

5 Answers5