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.
click
... puede ser algo como:document.addEventListener('DOMContentLoaded', buttonScroll);