Javascript set button active

Question

I have a table of buttons and once it is populated, I am using

document.getElementById("btn0").click();

to click the first button. The button is doing what it should do, but the background color of the button is not changing the same way it does when I am clicking it manually.

As you can see when its running, the background-color of the div is changing, but the button is not set to active.

Code Snippet:

var myfunc = function(){
    document.getElementById("test").style.backgroundColor="red";
};

document.getElementById("btn0").click();

.btn{
  border: none;
  color: white;
  width: 100%;
  padding: 5px 5px 5px 5px;
  height: 50px;
  cursor: pointer;
  font-size: 12px;
  background-color: #343a40;
}

.btn:active .btn.active{
  background-color:green;
  outline: none;
}

.btn:focus{
  background-color:green;
  outline: none;
}

#test{
  background-color: green;
  width: 600px;
  height: 400px;
}

<button class="btn" onclick="myfunc()" id="btn0"> Cool button</button>

<div id="test">
  Hello
</div>

Here is a link to a jsfiddle I created: https://jsfiddle.net/58hrwcgo/3/

Answer 1

You can try the HTML DOM focus() method.

 document.getElementById("btn0").focus(); 

You can read more about this in here.

Answer 2

There's a difference between click and focus.

click() clicks on the element and then unfocuses, unlike a real mouse click, which clicks and then focuses.

I would recommend simulating a real click by doing both:

document.getElementById("btn0").click();
document.getElementById("btn0").focus();

Answer 3

js

const btn = document.getElementById("btn0")
var myfunc = function(){
    document.getElementById("test").style.backgroundColor="red";
    btn.focus();
};

btn.click();

css

...

.btn:active, .btn.active{
  background-color:green;
  outline: none;
}

...

Answer 4

When clicking manually a focus state ist triggered first. That's why the appearance changes according to your class .btn:focus.

document.getElementById("btn0").focus();
document.getElementById("btn0").click();

will lead to the desired behavior.

Furthermore you're missing a colon in your CSS-Example within the :active state:

.btn:active, .btn.active { ... }

Answer 5

Method 1:

You can use querySelector function to select the button, then add "active" to its class list. You also need to change the css selection of active button

var myfunc = function(){
  document.getElementById("test").style.backgroundColor="red";
  // add the following changes
  const btn = document.querySelector(".btn")
  btn.classList.add('active');
};

document.getElementById("btn0").click();

/*  ....

/*  change the btn active to the following */
 .btn.active{
  background-color:green;
  outline: none;
}


/* .....

Method 2: Use addEventListener (preferred)

You can do the whole process in JavaScript without a need to use "onclick" in HTML

const test =  document.querySelector("#test")
const btn = document.querySelector(".btn")
btn.addEventListener('click', ()=>{
   test.style.backgroundColor="red";
   btn.classList.add('active');
});
document.getElementById("btn0").click();

.btn{
  border: none;
  color: white;
  width: 100%;
  padding: 5px 5px 5px 5px;
  height: 50px;
  cursor: pointer;
  font-size: 12px;
  background-color: #343a40;
}

/*  change the btn active to the following */
 .btn.active{
  background-color:green;
  outline: none;
}

.btn:focus{
  background-color:green;
  outline: none;
}

#test{
  background-color: green;
  width: 600px;
  height: 400px;
}

<button class="btn" id="btn0"> Cool button</button>

<div id="test">
  Hello
</div>