click button (CSS) using JS script

Question

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);

You could use a class instead of `:active`. – Barmar Nov 16 '21 at 07:55 — Barmar, Nov 16 '21 at 07:55

score 2 · Answer 1 · answered Nov 16 '21 at 07:53

2

You mean

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

or

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

answered Nov 16 '21 at 07:53

mplungjan

169,008
28
173
236

score 0 · Answer 2 · edited Nov 16 '21 at 08:41

0

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);
  `;
});

edited Nov 16 '21 at 08:41

Adrian Mole

49,934
160
51
83

answered Nov 16 '21 at 08:04

Batuhan Baş

1
1

1

this is not what OP asked. They want to programmatically click the button – mplungjan Nov 16 '21 at 08:52

click button (CSS) using JS script

2 Answers2