I have developed a ViolentMonkey userscript that adds an event listener to a button with the ID #mark-watched. When this button is clicked, it automatically triggers a click on the button with the ID #next-video. This functionality is necessary because the website does not automatically mark videos as watched or move to the next video upon completion.
Below is a simplified representation of the webpage structure where my userscript will be executed:
<div class="container">
<button id="next-video" type="button">Next Video</button>
<button id="mark-watched" type="button">Complete section</button>
</div>
This is the code snippet for the userscript I created:
const mark_watched_btn = document.getElementById("mark-watched");
const next_video_btn = document.getElementById("next-video");
mark_watched_btn.addEventListener("click", (event) => {
// wait for 500ms to ensure successful submission of AJAX call marking video as watched
setTimeout(() => {
next_video_btn.click();
}, 500);
});
The userscript functions correctly when the page initially loads. However, once the page navigates to the next video, the event listener stops working due to the website being built using a JavaScript SAP framework. As a result, when the .container component is reloaded and new buttons are added, the userscript or ViolentMonkey fails to re-execute the script.
Is there a method to dynamically apply my click event listener on #mark-watched to all future buttons that may appear on the page?