-1

I recently launched an online tutor.

I need a function when someone done with watching video lesson next button should populate until that it should remain hidden. Any help much appriciated Here's the code I am trying:

const video = document.querySelector('video'); video.addEventListener('ended', (event) => {   const div = document.getElementsByClassName("tutor-single-course-content-next");   div.style.visibility = "visible";
});

<div class="tutor-single-course-content-next"> <a class="tutor-btn tutor-btn-secondary tutor-btn-sm" href="yield4learning.co.uk/courses/bank-guarantee/lesson/lesson-7"> <span class="tutor-mr-8">Next</span> <span class="tutor-icon-next" area-hidden="true"></span> </a> </div>

.tutor-single-course-content-next{ Visibility: hidden; }

I would like hide the Next button until video is not completed.

Sneha Sharma
  • 1
  • 2
  • 1
    `const video = document.querySelector('video'); video.addEventListener('ended', (event) => { const div = document.getElementsByClassName("tutor-single-course-content-next"); div.style.visibility = "visible"; });` – Sneha Sharma Jan 12 '23 at 07:32
  • Please edit your post and provide HTML and JS code inside. – SnoopFrog Jan 12 '23 at 07:37
  • Next – Sneha Sharma Jan 12 '23 at 07:40
  • .tutor-single-course-content-next{ Visibility: hidden; } – Sneha Sharma Jan 12 '23 at 07:40
  • In message please, not in comments :) – SnoopFrog Jan 12 '23 at 07:40
  • guys.. my code is working now var media = document.querySelector('video'); media.addEventListener("ended", BtnVisible); function BtnVisible(){ var btnVisible = document.getElementsByClassName("tutor-single-course-content-next"); btnVisible.style.visibility = "visible"; }; But I am facing one error now: cannot set property of undefined (setting 'visibility') – Sneha Sharma Jan 12 '23 at 10:17
  • Please let me know how can i fix this? – Sneha Sharma Jan 12 '23 at 10:18
  • okie mission accomplished guys :) I did it by my own :) yepiii – Sneha Sharma Jan 12 '23 at 10:43
  • Here's the final code: var media = document.querySelector('video'); media.addEventListener("ended", BtnVisible); function BtnVisible(){ const btnVisible = document.getElementsByClassName("tutor-single-course-content-next"); console.log(btnVisible); btnVisible[0].style.visibility = "visible"; }; – Sneha Sharma Jan 12 '23 at 10:43

1 Answers1

0

can you use jQuery? if so, you can intercept the "ended" event and show up the next button like this width the jQuery show() function:

 $("#video-id").on("ended", function (e) { $(".tutor-single-course-content-next").show(); }
Enrico Thrasher Monzeglio
  • 1
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 12 '23 at 13:22