What's new
By:

❓ Help Need help how to populate HTML selector to javascript

D

DetroitGuru

Forum Guru
Anyone please help me how can I populate this HTML on this Javascript

HTML:
HTML: 
<div class="show-video respon-vdo">
    <img class="mybackgroundx"></div>
<div class="tab-eps video-epsx">
<label for="season-select">Select Season:</label>
    <select id="season-select">
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
    </select>
  <script>
    var season1Episode = [
"https://vidsrc.cc/v2/embed/tv/76065/1/1",
"https://vidsrc.cc/v2/embed/tv/76065/1/2",
"https://vidsrc.cc/v2/embed/tv/76065/1/3",
"https://vidsrc.cc/v2/embed/tv/76065/1/4",
"https://vidsrc.cc/v2/embed/tv/76065/1/5",
"https://vidsrc.cc/v2/embed/tv/76065/1/6",
"https://vidsrc.cc/v2/embed/tv/76065/1/7",
"https://vidsrc.cc/v2/embed/tv/76065/1/8",
"https://vidsrc.cc/v2/embed/tv/76065/1/9",
"https://vidsrc.cc/v2/embed/tv/76065/1/10",
    ]
    var season2Episode = [
"https://vidsrc.cc/v2/embed/tv/76065/2/1",
"https://vidsrc.cc/v2/embed/tv/76065/2/2",
"https://vidsrc.cc/v2/embed/tv/76065/2/3",
"https://vidsrc.cc/v2/embed/tv/76065/2/4",
"https://vidsrc.cc/v2/embed/tv/76065/2/5",
"https://vidsrc.cc/v2/embed/tv/76065/2/6",
"https://vidsrc.cc/v2/embed/tv/76065/2/7",
"https://vidsrc.cc/v2/embed/tv/76065/2/8",
"https://vidsrc.cc/v2/embed/tv/76065/2/9",
"https://vidsrc.cc/v2/embed/tv/76065/2/10",
    ]
  </script>
  </div>

Javascript:
JavaScript: 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    ! function () {
        for (var b = video_listx.length, c = $(".tab-eps"), a = 0; a < b; a++) c.append("<a class='button-eps' data-id='" + a + "' data-eps='You Selected Episode " + (a + 1) + "'> " + (a + 1) + "</a>");
        var d = $(".show-video");
        $(".button-eps").click(function () {
            d.html('<div class="respon-vdo"><iframe src="' + video_listx[parseInt($(this).data("id"))] + '" frameborder="0" allow="autoplay" allowfullscreen> width="100%" height="360"></iframe></div>'), $(".video-title").text($(this).data("eps"))
        })
    }(), $(".button-eps").click(function () {
        $(".video-epsx a").removeClass("activated"), $(this).addClass("activated"), $([document.documentElement, document.body]).animate({
            scrollTop: $(".show-video").offset().top - 85
        }, 700)
    })
});
//]]>
</script>
 
To populate the HTML selector in the JavaScript code, you will need to update the script to dynamically change the video list based on the selected season in the dropdown. Here's how you can modify the JavaScript code to achieve this:

JavaScript: 
$(document).ready(function () {
    var season1Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/1/1",
        "https://vidsrc.cc/v2/embed/tv/76065/1/2",
        "https://vidsrc.cc/v2/embed/tv/76065/1/3",
        "https://vidsrc.cc/v2/embed/tv/76065/1/4",
        "https://vidsrc.cc/v2/embed/tv/76065/1/5",
        "https://vidsrc.cc/v2/embed/tv/76065/1/6",
        "https://vidsrc.cc/v2/embed/tv/76065/1/7",
        "https://vidsrc.cc/v2/embed/tv/76065/1/8",
        "https://vidsrc.cc/v2/embed/tv/76065/1/9",
        "https://vidsrc.cc/v2/embed/tv/76065/1/10"
    ];

    var season2Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/2/1",
        "https://vidsrc.cc/v2/embed/tv/76065/2/2",
        "https://vidsrc.cc/v2/embed/tv/76065/2/3",
        "https://vidsrc.cc/v2/embed/tv/76065/2/4",
        "https://vidsrc.cc/v2/embed/tv/76065/2/5",
        "https://vidsrc.cc/v2/embed/tv/76065/2/6",
        "https://vidsrc.cc/v2/embed/tv/76065/2/7",
        "https://vidsrc.cc/v2/embed/tv/76065/2/8",
        "https://vidsrc.cc/v2/embed/tv/76065/2/9",
        "https://vidsrc.cc/v2/embed/tv/76065/2/10"
    ];

    $("#season-select").change(function() {
        var selectedSeason = $(this).val();
        var video_listx = selectedSeason === '1' ? season1Episode : season2Episode;

        var c = $(".tab-eps");
        c.empty();

        for (var a = 0; a < video_listx.length; a++) {
            c.append("<a class='button-eps' data-id='" + a + "' data-eps='You Selected Episode " + (a + 1) + "'> " + (a + 1) + "</a>");
        }

        $(".button-eps").click(function () {
            var d = $(".show-video");
            d.html('<div class="respon-vdo"><iframe src="' + video_listx[parseInt($(this).data("id"))] + '" frameborder="0" allow="autoplay" allowfullscreen> width="100%" height="360"></iframe></div>');
            $(".video-title").text($(this).data("eps"));

            $(".video-epsx a").removeClass("activated");
            $(this).addClass("activated");
            $([document.documentElement, document.body]).animate({
                scrollTop: d.offset().top - 85
            }, 700);
        });
    });
});

In this updated JavaScript code, the change event listener is added to the #season-select dropdown. When the season is changed, it checks the selected season value and updates the video_listx array accordingly. It then populates the .tab-eps div with the new episode buttons based on the selected season.

Now, when a user selects a season from the dropdown, the corresponding episodes will be displayed in the episode buttons, and clicking on an episode will display the video for that episode.
 
🤖 said:
To populate the HTML selector in the JavaScript code, you will need to update the script to dynamically change the video list based on the selected season in the dropdown. Here's how you can modify the JavaScript code to achieve this:

JavaScript: 
$(document).ready(function () {
    var season1Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/1/1",
        "https://vidsrc.cc/v2/embed/tv/76065/1/2",
        "https://vidsrc.cc/v2/embed/tv/76065/1/3",
        "https://vidsrc.cc/v2/embed/tv/76065/1/4",
        "https://vidsrc.cc/v2/embed/tv/76065/1/5",
        "https://vidsrc.cc/v2/embed/tv/76065/1/6",
        "https://vidsrc.cc/v2/embed/tv/76065/1/7",
        "https://vidsrc.cc/v2/embed/tv/76065/1/8",
        "https://vidsrc.cc/v2/embed/tv/76065/1/9",
        "https://vidsrc.cc/v2/embed/tv/76065/1/10"
    ];

    var season2Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/2/1",
        "https://vidsrc.cc/v2/embed/tv/76065/2/2",
        "https://vidsrc.cc/v2/embed/tv/76065/2/3",
        "https://vidsrc.cc/v2/embed/tv/76065/2/4",
        "https://vidsrc.cc/v2/embed/tv/76065/2/5",
        "https://vidsrc.cc/v2/embed/tv/76065/2/6",
        "https://vidsrc.cc/v2/embed/tv/76065/2/7",
        "https://vidsrc.cc/v2/embed/tv/76065/2/8",
        "https://vidsrc.cc/v2/embed/tv/76065/2/9",
        "https://vidsrc.cc/v2/embed/tv/76065/2/10"
    ];

    $("#season-select").change(function() {
        var selectedSeason = $(this).val();
        var video_listx = selectedSeason === '1' ? season1Episode : season2Episode;

        var c = $(".tab-eps");
        c.empty();

        for (var a = 0; a < video_listx.length; a++) {
            c.append("<a class='button-eps' data-id='" + a + "' data-eps='You Selected Episode " + (a + 1) + "'> " + (a + 1) + "</a>");
        }

        $(".button-eps").click(function () {
            var d = $(".show-video");
            d.html('<div class="respon-vdo"><iframe src="' + video_listx[parseInt($(this).data("id"))] + '" frameborder="0" allow="autoplay" allowfullscreen> width="100%" height="360"></iframe></div>');
            $(".video-title").text($(this).data("eps"));

            $(".video-epsx a").removeClass("activated");
            $(this).addClass("activated");
            $([document.documentElement, document.body]).animate({
                scrollTop: d.offset().top - 85
            }, 700);
        });
    });
});

In this updated JavaScript code, the change event listener is added to the #season-select dropdown. When the season is changed, it checks the selected season value and updates the video_listx array accordingly. It then populates the .tab-eps div with the new episode buttons based on the selected season.

Now, when a user selects a season from the dropdown, the corresponding episodes will be displayed in the episode buttons, and clicking on an episode will display the video for that episode.
Click to expand...
I want the embedded links stay on HTML is that possible?
 
DetroitGuru said:
I want the embedded links stay on HTML is that possible?
Click to expand...
If you want to keep the embedded video links in the HTML and avoid dynamically generating them in the JavaScript, you can modify your code to achieve that. Here's how you can update your code to keep the embedded links in the HTML:

HTML:
HTML: 
<div class="show-video respon-vdo">
    <img class="mybackgroundx">
</div>
<div class="tab-eps video-epsx">
    <label for="season-select">Select Season:</label>
    <select id="season-select">
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
    </select>
    <div id="video-links" style="display: none;">
        <div id="season1">
            <a class="button-eps" data-id="0" data-eps="You Selected Episode 1" href="https://vidsrc.cc/v2/embed/tv/76065/1/1">1</a>
            <a class="button-eps" data-id="1" data-eps="You Selected Episode 2" href="https://vidsrc.cc/v2/embed/tv/76065/1/2">2</a>
            <!-- Add more episode links for Season 1 here -->
        </div>
        <div id="season2">
            <a class="button-eps" data-id="0" data-eps="You Selected Episode 1" href="https://vidsrc.cc/v2/embed/tv/76065/2/1">1</a>
            <a class="button-eps" data-id="1" data-eps="You Selected Episode 2" href="https://vidsrc.cc/v2/embed/tv/76065/2/2">2</a>
            <!-- Add more episode links for Season 2 here -->
        </div>
    </div>
</div>

JavaScript:
JavaScript: 
$(document).ready(function () {
    $("#season-select").change(function() {
        var selectedSeason = $(this).val();
        $(".button-eps").hide(); // Hide all episode links
        $("#season" + selectedSeason).children().show(); // Show episode links for selected season
    });

    $(".button-eps").click(function() {
        var videoLink = $(this).attr("href");
        var episodeNumber = $(this).data("id") + 1;
        var episodeTitle = $(this).data("eps");

        var d = $(".show-video");
        d.html('<div class="respon-vdo"><iframe src="' + videoLink + '" frameborder="0" allow="autoplay" allowfullscreen width="100%" height="360"></iframe></div>');
        $(".video-title").text(episodeTitle);

        $(".button-eps").removeClass("activated");
        $(this).addClass("activated");
        $([document.documentElement, document.body]).animate({
            scrollTop: d.offset().top - 85
        }, 700);
    });
});

In this updated code, the embedded video links for each episode are stored in the HTML within the hidden #video-links div. When a season is selected from the dropdown, the corresponding episode links are shown based on the selected season, allowing users to click on the episode links to display the video for that episode.
 
🤖 said:
If you want to keep the embedded video links in the HTML and avoid dynamically generating them in the JavaScript, you can modify your code to achieve that. Here's how you can update your code to keep the embedded links in the HTML:

HTML:
HTML: 
<div class="show-video respon-vdo">
    <img class="mybackgroundx">
</div>
<div class="tab-eps video-epsx">
    <label for="season-select">Select Season:</label>
    <select id="season-select">
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
    </select>
    <div id="video-links" style="display: none;">
        <div id="season1">
            <a class="button-eps" data-id="0" data-eps="You Selected Episode 1" href="https://vidsrc.cc/v2/embed/tv/76065/1/1">1</a>
            <a class="button-eps" data-id="1" data-eps="You Selected Episode 2" href="https://vidsrc.cc/v2/embed/tv/76065/1/2">2</a>
            <!-- Add more episode links for Season 1 here -->
        </div>
        <div id="season2">
            <a class="button-eps" data-id="0" data-eps="You Selected Episode 1" href="https://vidsrc.cc/v2/embed/tv/76065/2/1">1</a>
            <a class="button-eps" data-id="1" data-eps="You Selected Episode 2" href="https://vidsrc.cc/v2/embed/tv/76065/2/2">2</a>
            <!-- Add more episode links for Season 2 here -->
        </div>
    </div>
</div>

JavaScript:
JavaScript: 
$(document).ready(function () {
    $("#season-select").change(function() {
        var selectedSeason = $(this).val();
        $(".button-eps").hide(); // Hide all episode links
        $("#season" + selectedSeason).children().show(); // Show episode links for selected season
    });

    $(".button-eps").click(function() {
        var videoLink = $(this).attr("href");
        var episodeNumber = $(this).data("id") + 1;
        var episodeTitle = $(this).data("eps");

        var d = $(".show-video");
        d.html('<div class="respon-vdo"><iframe src="' + videoLink + '" frameborder="0" allow="autoplay" allowfullscreen width="100%" height="360"></iframe></div>');
        $(".video-title").text(episodeTitle);

        $(".button-eps").removeClass("activated");
        $(this).addClass("activated");
        $([document.documentElement, document.body]).animate({
            scrollTop: d.offset().top - 85
        }, 700);
    });
});

In this updated code, the embedded video links for each episode are stored in the HTML within the hidden #video-links div. When a season is selected from the dropdown, the corresponding episode links are shown based on the selected season, allowing users to click on the episode links to display the video for that episode.
Click to expand...
I applied your provided javascript and this is the result:
Screenshot_20240909-192805.jpg

When selecting, the "Season 1" already selected but there is no episode buttons appear.

Screenshot_20240909-192820.jpg

When I selected "Season 2", the episode buttons appear but there is no way to switch back to "Season 1" or vice versa:

Screenshot_20240909-192851.jpg

It will be stuck to be like this and you have to refresh the website or click back button on nav bar.

This is the code I use:
HTML:
HTML: 
<div class="show-video respon-vdo">
    <img class="mybackgroundx"></div>
<div class="tab-eps video-epsx">
<label for="season-select">Select Season:</label>
    <select id="season-select">
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
    </select>
<script>
    var season1Episode = [
"https://vidsrc.cc/v2/embed/tv/76065/1/1",
"https://vidsrc.cc/v2/embed/tv/76065/1/2",
"https://vidsrc.cc/v2/embed/tv/76065/1/3",
"https://vidsrc.cc/v2/embed/tv/76065/1/4",
"https://vidsrc.cc/v2/embed/tv/76065/1/5",
"https://vidsrc.cc/v2/embed/tv/76065/1/6",
"https://vidsrc.cc/v2/embed/tv/76065/1/7",
"https://vidsrc.cc/v2/embed/tv/76065/1/8",
"https://vidsrc.cc/v2/embed/tv/76065/1/9",
"https://vidsrc.cc/v2/embed/tv/76065/1/10",
    ]
   
    var season2Episode = [
"https://vidsrc.cc/v2/embed/tv/76065/2/1",
"https://vidsrc.cc/v2/embed/tv/76065/2/2",
"https://vidsrc.cc/v2/embed/tv/76065/2/3",
"https://vidsrc.cc/v2/embed/tv/76065/2/4",
"https://vidsrc.cc/v2/embed/tv/76065/2/5",
"https://vidsrc.cc/v2/embed/tv/76065/2/6",
"https://vidsrc.cc/v2/embed/tv/76065/2/7",
"https://vidsrc.cc/v2/embed/tv/76065/2/8",
"https://vidsrc.cc/v2/embed/tv/76065/2/9",
"https://vidsrc.cc/v2/embed/tv/76065/2/10",
    ]
</script>
</div>

Javascript:
JavaScript: 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$("#season-select").change(function() {
        var selectedSeason = $(this).val();
        var video_listx = selectedSeason === '0' ? season1Episode : season2Episode;

        var c = $(".tab-eps");
        c.empty();

        for (var a = 0; a < video_listx.length; a++) {
            c.append("<a class='button-eps' data-id='" + a + "' data-eps='You Selected Episode " + (a + 1) + "'> " + (a + 1) + "</a>");
        }

        $(".button-eps").click(function () {
            var d = $(".show-video");
            d.html('<div class="respon-vdo"><iframe src="' + video_listx[parseInt($(this).data("id"))] + '" frameborder="0" allow="autoplay" allowfullscreen> width="100%" height="360"></iframe></div>');
            $(".video-title").text($(this).data("eps"));

            $(".video-epsx a").removeClass("activated");
            $(this).addClass("activated");
            $([document.documentElement, document.body]).animate({
                scrollTop: d.offset().top - 85
            }, 700);
        });
    });
});
//]]>
</script>
 
DetroitGuru said:
I apply your provided javascript and this the result:
View attachment 3098626
When selecting, the "Season 1" already selected but there is no episode buttons appear.

View attachment 3098630
When I selected "Season 2", the episode buttons appear but there is no way to switch back to "Season 1" or vice versa:

View attachment 3098634
It will be stuck to be like this and you have to refresh the website or click back button on nav bar.

This is the code I use:
HTML:
HTML: 
<div class="show-video respon-vdo">
    <img class="mybackgroundx"></div>
<div class="tab-eps video-epsx">
<label for="season-select">Select Season:</label>
    <select id="season-select">
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
    </select>
<script>
    var season1Episode = [
"https://vidsrc.cc/v2/embed/tv/76065/1/1",
"https://vidsrc.cc/v2/embed/tv/76065/1/2",
"https://vidsrc.cc/v2/embed/tv/76065/1/3",
"https://vidsrc.cc/v2/embed/tv/76065/1/4",
"https://vidsrc.cc/v2/embed/tv/76065/1/5",
"https://vidsrc.cc/v2/embed/tv/76065/1/6",
"https://vidsrc.cc/v2/embed/tv/76065/1/7",
"https://vidsrc.cc/v2/embed/tv/76065/1/8",
"https://vidsrc.cc/v2/embed/tv/76065/1/9",
"https://vidsrc.cc/v2/embed/tv/76065/1/10",
    ]
    
    var season2Episode = [
"https://vidsrc.cc/v2/embed/tv/76065/2/1",
"https://vidsrc.cc/v2/embed/tv/76065/2/2",
"https://vidsrc.cc/v2/embed/tv/76065/2/3",
"https://vidsrc.cc/v2/embed/tv/76065/2/4",
"https://vidsrc.cc/v2/embed/tv/76065/2/5",
"https://vidsrc.cc/v2/embed/tv/76065/2/6",
"https://vidsrc.cc/v2/embed/tv/76065/2/7",
"https://vidsrc.cc/v2/embed/tv/76065/2/8",
"https://vidsrc.cc/v2/embed/tv/76065/2/9",
"https://vidsrc.cc/v2/embed/tv/76065/2/10",
    ]
</script>
</div>

Javascript:
JavaScript: 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$("#season-select").change(function() {
        var selectedSeason = $(this).val();
        var video_listx = selectedSeason === '0' ? season1Episode : season2Episode;

        var c = $(".tab-eps");
        c.empty();

        for (var a = 0; a < video_listx.length; a++) {
            c.append("<a class='button-eps' data-id='" + a + "' data-eps='You Selected Episode " + (a + 1) + "'> " + (a + 1) + "</a>");
        }

        $(".button-eps").click(function () {
            var d = $(".show-video");
            d.html('<div class="respon-vdo"><iframe src="' + video_listx[parseInt($(this).data("id"))] + '" frameborder="0" allow="autoplay" allowfullscreen> width="100%" height="360"></iframe></div>');
            $(".video-title").text($(this).data("eps"));

            $(".video-epsx a").removeClass("activated");
            $(this).addClass("activated");
            $([document.documentElement, document.body]).animate({
                scrollTop: d.offset().top - 85
            }, 700);
        });
    });
});
//]]>
</script>
Click to expand...
It seems that there is an issue with the code that is causing the page to become unresponsive or stuck. Let's troubleshoot the code to identify and fix the problem. Here are a few potential areas to check:

1. Incorrect Season Check:
- In your JavaScript code, you have selectedSeason === '0' to check the selected season. This should be selectedSeason === '1' for Season 1 and selectedSeason === '2' for Season 2. Update this check to ensure the correct season is selected.

2. Event Binding Issues:
- Make sure that event bindings are not duplicated. If the event listeners are being attached multiple times, it can lead to unexpected behavior. Ensure that event listeners are set up only once.

3. Proper Element Selection:
- Verify that the elements you are selecting in your JavaScript code exist in the DOM. Incorrect selectors can cause issues with updating the content dynamically.

Let's update the code snippet to address the potential issues mentioned above:

HTML:
HTML: 
<div class="show-video respon-vdo">
    <img class="mybackgroundx">
</div>
<div class="tab-eps video-epsx">
    <label for="season-select">Select Season:</label>
    <select id="season-select">
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
    </select>
</div>

<script>
    var season1Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/1/1",
        "https://vidsrc.cc/v2/embed/tv/76065/1/2",
        "https://vidsrc.cc/v2/embed/tv/76065/1/3",
        "https://vidsrc.cc/v2/embed/tv/76065/1/4",
        "https://vidsrc.cc/v2/embed/tv/76065/1/5",
        "https://vidsrc.cc/v2/embed/tv/76065/1/6",
        "https://vidsrc.cc/v2/embed/tv/76065/1/7",
        "https://vidsrc.cc/v2/embed/tv/76065/1/8",
        "https://vidsrc.cc/v2/embed/tv/76065/1/9",
        "https://vidsrc.cc/v2/embed/tv/76065/1/10"
    ];

    var season2Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/2/1",
        "https://vidsrc.cc/v2/embed/tv/76065/2/2",
        "https://vidsrc.cc/v2/embed/tv/76065/2/3",
        "https://vidsrc.cc/v2/embed/tv/76065/2/4",
        "https://vidsrc.cc/v2/embed/tv/76065/2/5",
        "https://vidsrc.cc/v2/embed/tv/76065/2/6",
        "https://vidsrc.cc/v2/embed/tv/76065/2/7",
        "https://vidsrc.cc/v2/embed/tv/76065/2/8",
        "https://vidsrc.cc/v2/embed/tv/76065/2/9",
        "https://vidsrc.cc/v2/embed/tv/76065/2/10"
    ];
</script>

JavaScript:
JavaScript: 
$(document).ready(function () {
    $("#season-select").change(function() {
        var selectedSeason = $(this).val();
        var video_listx = selectedSeason === '1' ? season1Episode : season2Episode;

        var c = $(".tab-eps");
        c.empty();

        for (var a = 0; a < video_listx.length; a++) {
            c.append("<a class='button-eps' data-id='" + a + "' data-eps='You Selected Episode " + (a + 1) + "'> " + (a + 1) + "</a>");
        }
    });

    $(document).on('click', '.button-eps', function () {
        var d = $(".show-video");
        var videoLink = $(this).data("id");
        d.html('<div class="respon-vdo"><iframe src="' + video_listx[videoLink] + '" frameborder="0" allow="autoplay" allowfullscreen width="100%" height="360"></iframe></div>');
        $(".video-title").text($(this).data("eps"));

        $(".video-epsx a").removeClass("activated");
        $(this).addClass("activated");
        $([document.documentElement, document.body]).animate({
            scrollTop: d.offset().top - 85
        }, 700);
    });
});

By correcting the issues mentioned above and making sure the event bindings are set up correctly, the code should work as expected without causing the page to become stuck. Let me know if you encounter any more issues or need further assistance!
 
🤖 said:
It seems that there is an issue with the code that is causing the page to become unresponsive or stuck. Let's troubleshoot the code to identify and fix the problem. Here are a few potential areas to check:

1. Incorrect Season Check:
- In your JavaScript code, you have selectedSeason === '0' to check the selected season. This should be selectedSeason === '1' for Season 1 and selectedSeason === '2' for Season 2. Update this check to ensure the correct season is selected.

2. Event Binding Issues:
- Make sure that event bindings are not duplicated. If the event listeners are being attached multiple times, it can lead to unexpected behavior. Ensure that event listeners are set up only once.

3. Proper Element Selection:
- Verify that the elements you are selecting in your JavaScript code exist in the DOM. Incorrect selectors can cause issues with updating the content dynamically.

Let's update the code snippet to address the potential issues mentioned above:

HTML:
HTML: 
<div class="show-video respon-vdo">
    <img class="mybackgroundx">
</div>
<div class="tab-eps video-epsx">
    <label for="season-select">Select Season:</label>
    <select id="season-select">
        <option value="1">Season 1</option>
        <option value="2">Season 2</option>
    </select>
</div>

<script>
    var season1Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/1/1",
        "https://vidsrc.cc/v2/embed/tv/76065/1/2",
        "https://vidsrc.cc/v2/embed/tv/76065/1/3",
        "https://vidsrc.cc/v2/embed/tv/76065/1/4",
        "https://vidsrc.cc/v2/embed/tv/76065/1/5",
        "https://vidsrc.cc/v2/embed/tv/76065/1/6",
        "https://vidsrc.cc/v2/embed/tv/76065/1/7",
        "https://vidsrc.cc/v2/embed/tv/76065/1/8",
        "https://vidsrc.cc/v2/embed/tv/76065/1/9",
        "https://vidsrc.cc/v2/embed/tv/76065/1/10"
    ];

    var season2Episode = [
        "https://vidsrc.cc/v2/embed/tv/76065/2/1",
        "https://vidsrc.cc/v2/embed/tv/76065/2/2",
        "https://vidsrc.cc/v2/embed/tv/76065/2/3",
        "https://vidsrc.cc/v2/embed/tv/76065/2/4",
        "https://vidsrc.cc/v2/embed/tv/76065/2/5",
        "https://vidsrc.cc/v2/embed/tv/76065/2/6",
        "https://vidsrc.cc/v2/embed/tv/76065/2/7",
        "https://vidsrc.cc/v2/embed/tv/76065/2/8",
        "https://vidsrc.cc/v2/embed/tv/76065/2/9",
        "https://vidsrc.cc/v2/embed/tv/76065/2/10"
    ];
</script>

JavaScript:
JavaScript: 
$(document).ready(function () {
    $("#season-select").change(function() {
        var selectedSeason = $(this).val();
        var video_listx = selectedSeason === '1' ? season1Episode : season2Episode;

        var c = $(".tab-eps");
        c.empty();

        for (var a = 0; a < video_listx.length; a++) {
            c.append("<a class='button-eps' data-id='" + a + "' data-eps='You Selected Episode " + (a + 1) + "'> " + (a + 1) + "</a>");
        }
    });

    $(document).on('click', '.button-eps', function () {
        var d = $(".show-video");
        var videoLink = $(this).data("id");
        d.html('<div class="respon-vdo"><iframe src="' + video_listx[videoLink] + '" frameborder="0" allow="autoplay" allowfullscreen width="100%" height="360"></iframe></div>');
        $(".video-title").text($(this).data("eps"));

        $(".video-epsx a").removeClass("activated");
        $(this).addClass("activated");
        $([document.documentElement, document.body]).animate({
            scrollTop: d.offset().top - 85
        }, 700);
    });
});

By correcting the issues mentioned above and making sure the event bindings are set up correctly, the code should work as expected without causing the page to become stuck. Let me know if you encounter any more issues or need further assistance!
Click to expand...
Hello PHC bot, how can I mentioned you on other threads?
 
DetroitGuru said:
Hello PHC bot, how can I mentioned you on other threads?
Click to expand...
To mention me in other threads on the forum, you can simply use the "@" symbol followed by my username, which is "PHC bot". For example, you can mention me like this: "PhC bot".

Feel free to mention me whenever you need assistance with coding, programming, or any other related questions. I'll do my best to help you out!
 
DetroitGuru said:
/ai How API works?
Click to expand...
Eto pala paps hahaha replyan mo lang paps last message nya

🤖 said:
To mention me in other threads on the forum, you can simply use the "@" symbol followed by my username, which is "PHC bot". For example, you can mention me like this: "PhC bot".

Feel free to mention me whenever you need assistance with coding, programming, or any other related questions. I'll do my best to help you out!
Click to expand...
How API Really works?
 

Similar threads

About this Thread

  • 12
    Replies
  • 594
    Views
  • 2
    Participants
Last reply from:
DetroitGuru

New Topics

Trending Topics

Online now

Members online
537
Guests online
914
Total visitors
1,451

Forum statistics

Threads
2,273,600
Posts
28,950,528
Members
1,235,851
Latest member
djilali21
Back
Top