Disable scroll button until fully scrolled

Question

https://codepen.io/ha26ktan/pen/oNoQGEO

I built a website with my minimal - intermediate level of css and html knowledge. I have 2 buttons. One of them is for scrolling to the right and the other to the left. This scrolling is according to the width of a divin column.

When the right or left button is pressed repeatedly, the command is triggered again without waiting for the distance to go, and this causes it to stay outside the required distance.

How can I disable both buttons until they switch to the other column? Thank you very much in advance.

`const kitapp = document.getElementById('kitapp');

document.getElementById("btnLeft").onclick = () => {
  kitapp.scroll({
    left: kitapp.scrollLeft + kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
}
     
document.getElementById("btnRight").onclick = () => {
  kitapp.scroll({
    left: kitapp.scrollLeft - kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
}`

---

const kitapp = document.getElementById('kitapp');

document.getElementById("btnRight").onclick = () => {
document.getElementById("btnRight").disabled = true;
  kitapp.scroll({
    left: kitapp.scrollLeft + kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
setTimeout(enableButon1, 1000);

}
 
document.getElementById("btnLeft").onclick = () => {
document.getElementById("btnRight").disabled = true;
  kitapp.scroll({
    left: kitapp.scrollLeft - kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
setTimeout(enableButon2, 1000);
  
}

function enableButon1() {
     document.getElementById("btnLeft").disabled = false;
}
function enableButon1() {
    document.getElementById("btnRight").disabled = false;
}

Answer 1

You can try to disable the button once you click on it, you can use

document.getElementById("btnLeft").disabled = true;

once you click on it. It can look like this:

const kitapp = document.getElementById('kitapp');

document.getElementById("btnLeft").onclick = () => {
  kitapp.scroll({
    left: kitapp.scrollLeft + kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
document.getElementById("btnLeft").disabled = true;
}
 
document.getElementById("btnRight").onclick = () => {
  kitapp.scroll({
    left: kitapp.scrollLeft - kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
  document.getElementById("btnRight").disabled = true;
}

I think this should work for you, but you will need to enable the button later, making a timer for example, or enabling it when you click the other button.

Answer 2

Then you can try to make like this: When you click on the button, you can disable it

const kitapp = document.getElementById('kitapp');

document.getElementById("btnLeft").onclick = () => {
document.getElementById("btnLeft").disabled = true;
  kitapp.scroll({
    left: kitapp.scrollLeft + kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
setTimeout(enableButon1, 1000);

}
 
document.getElementById("btnRight").onclick = () => {
document.getElementById("btnRight").disabled = true;
  kitapp.scroll({
    left: kitapp.scrollLeft - kitapp.querySelector(".deneme").offsetWidth,
    behavior: 'smooth'
  });
setTimeout(enableButon2, 1000);
  
}

function enableButon1() {
     document.getElementById("btnLeft").disabled = false;
}
function enableButon1() {
    document.getElementById("btnRight").disabled = false;
}

I hope this one works for you.

You can change the time it waits changing the value of setTimeout(enableButon2, 1000); and put the number you want to wait.