Question 41630 in PHP Question posted in
Official manual can be found here.

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

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

Tags:

5

Answers


  1. 0

    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));
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
  5. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search