Estoy tratando de encontrar una solución para tener una presentación de diapositivas en mi extensión de Chrome. Tengo botones para > y < dentro de la presentación de diapositivas y no funcionan con el problema de JS en línea. He superado esto poniéndolo todo en un archivo JS pero aún no funciona.
HTML:
<div class="contents"> <div class="description"> <div id="options-greet" style="font-size: 1.75em; font-weight: bold;"></div> <div class="overview_description"> <div class="slideshow-container"> <div class="mySlides"> <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q> <p class="author">- John Keats</p> </div> <div class="mySlides"> <q>But man is not made for defeat. A man can be destroyed but not defeated.</q> <p class="author">- Ernest Hemingway</p> </div> <div class="mySlides"> <q>I have not failed. I've just found 10,000 ways that won't work.</q> <p class="author">- Thomas A. Edison</p> </div> <a class="prev" id="button1" >❮</a> <a class="next" id = "button2">❯</a> </div>archivo JS:
var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } document.getElementById("button2").addEventListener("onclick", plusSlides(1));Cuando escribes 'onclick', plusSlides(1) estás llamando inmediatamente a plusSlides y asignando el valor de retorno al oyente. Pero no está devolviendo nada, solo está llamando a una nueva función que tampoco devuelve nada. Entonces, en su lugar, pase una referencia de función que llame a plusSlides cuando tenga un evento de clic.
.addEventListener('onclick', () => plusSlides(1));