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

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

CodePudding user response：

Change your HTML to be like this:

<button type="button"  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));

CodePudding user response：

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.

CodePudding user response：

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 
            
           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>

CodePudding user response：

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"  data-season='2' data-episode='1'>
    Episode 1
</button>
<button type="button"  data-season='2' data-episode='2'>
    Episode 2
</button>
<button type="button"  data-season='2' data-episode='3'>
    Episode 3
</button>
<button type="button"  data-season='2' data-episode='4'>
    Episode 4
</button>
<button type="button"  data-season='2' data-episode='5'>
    Episode 5
</button>

CodePudding user response：

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" 
 
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.