click button (CSS) using JS script-CodePudding

Im making a simon says game, i use 4 colored buttons that works perfectly. the process is simple- the program present the user with the colors. the repeat the sequence by clicking the buttons.

I wish to let the program activate the button the same way a user would, with the appropriate activate effect.

.but:active{ // <-- how do i initiate this with js?
        box-shadow: 0 5px #666;
        transform: translateY(4px);

CodePudding user response：

You mean

document.querySelector(".but").click()

const buts = document.querySelectorAll(".but");
const cnt = 0;
setInterval(function() { 
  if (cnt>= 0) cnt = 0; 
  but[cnt].click();
  cnt  ;
},2000)

CodePudding user response：

let but = document.querySelector('.but');

but.addEventListener('click', () => {
   but.classList.add('active');

   let activeStatus = document.querySelector('.active');
   activeStatus.style = `
   box-shadow: 0 5px #666;
   transform: translateY(4px);
  `;
});