0

dicha función se ejecuta al segundo clic, los botones mueven unas cartas para un slider, anexo código:

const buttonScroll = () => {
    let btnButton = document.querySelectorAll('.recommendations-button button');
    let container = document.querySelector('.recommendations-shelves-container');
    let carousel = container.querySelector('.shelf-recommendations').offsetWidth;

    btnButton.forEach( btn => {
        btn.addEventListener('click', function() {
            container.scrollLeft += btn.id === "buttonFormer" ? carousel : -carousel;
        })
    })
}
2
  • (No aceptes la edición a tu pregunta, ya que modifica además tu código). ¿Qué pasa si movés tu código al evento DOMContentLoaded?
    – padaleiana
    Commented el 27 jul. 2023 a las 17:45
  • Puedes llamar a tu función una vez se cargue la página (como te indica @padaleiana), y de esta forma ya habrá asignado los listeners a tus botones listos para ser escuchados por el evento click... puede ser algo como: document.addEventListener('DOMContentLoaded', buttonScroll); Commented el 27 jul. 2023 a las 17:59

1 respuesta 1

0

El problema que estás experimentando es común cuando se trabaja con eventos click en JavaScript. El primer clic no se ejecuta porque el código buttonScroll() que adjuntaste no se ha llamado en ese momento. En cambio, el evento se adjunta al hacer el segundo clic porque en ese momento la función buttonScroll() ya se ha ejecutado y los eventos han sido agregados a los botones.

Para solucionar este problema, asegúrate de llamar a la función buttonScroll() después de que el DOM se haya cargado, por ejemplo, dentro de un evento DOMContentLoaded. De esta manera, los eventos se agregarán correctamente a los botones y se activarán cuando se haga clic en ellos desde el principio.

document.addEventListener('DOMContentLoaded', function() {
    const buttonScroll = () => {
        let btnButton = document.querySelectorAll('.recommendations-button button');
        let container = document.querySelector('.recommendations-shelves-container');
        let carousel = container.querySelector('.shelf-recommendations').offsetWidth;

        btnButton.forEach(btn => {
            btn.addEventListener('click', function() {
                container.scrollLeft += btn.id === "buttonFormer" ? carousel : -carousel;
            })
        })
    }

    // Llamar a la función buttonScroll después de que el DOM se haya cargado
    buttonScroll();
});

Con esta modificación, los eventos se agregarán correctamente a los botones desde el principio, y el primer clic también funcionará como se espera.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.