1

My question is a bit different from other questions asked before because I mainly want to active the but(not only fire it). Here is my syntx:

$("#second_btn").click(function(){
       $('#first_btn').addClass('active');
    })
#first_btn{
      background-color: green;
    }
    #first_btn:active{
      background-color: yellow;
    }
    
    #first_btn.active{
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first_btn">
    first_btn
    </button>
    <button id="second_btn">
    second_btn
    </button>

Basically what I am looking for is when the second button is clicked I want the first button be fired and the colour of the button(first) should also be changed to yellow as if button one is clicked.

Here is a jsFiddle version of it: click here

Can you help me identify what I am missing?

  • 1
    Possible duplicate of [One button firing another buttons click event](https://stackoverflow.com/questions/7532320/one-button-firing-another-buttons-click-event) – Patrick Sampaio Jul 01 '17 at 19:32
  • 2
    Why in you second button click handler you are trying to set 'active' class for not existing button with class '#btn'? – Artem Arkhipov Jul 01 '17 at 19:32
  • 1
    what do u mean by fire.. Do you need a click event to be fired on second button ??? – praveen Jul 01 '17 at 19:34

6 Answers6

2
$('#btn').addClass('active');

You have some errors there: - first #btn resolves to nothing (that's not an ID in your DOM) - you are adding a class 'active' so you would have to aim for that class in your csss. Note I changed the ':' (pseudo element) for a '.'(class selector)

#first_btn.active{
  background-color: yellow;
}

Give it some tries and come here if you encounter more troubles ;)

EDITED:

This may be not the best approach but it may help achieve what you want:

$("#second_btn").click(function(){
    $('#first_btn').toggleClass('active');
  window.setTimeout(function(){
    $('#first_btn').toggleClass('active');
  }, 100);
})

What I am doing here is setting an 'active' class (painting the button yellow) and after a time period of 0.1 seconds toggling that class again (restoring original button color).

What do you think?

Jose Gomez
  • 598
  • 4
  • 14
  • yes the above syntax makes the first button background color to turn to yellow when the second button is fired. Now, the problem is that the first button background color becomes permanently changed instead of short period of time –  Jul 01 '17 at 19:46
  • run the code snippet and you will see what I am talking about –  Jul 01 '17 at 19:48
1

You are changing the class to the wrong element, change $('#btn') to $('#first_btn'):

$("#second_btn").click(function(){
  $('#first_btn').addClass('active');
});

Also, you need to use more generic class, like this:

.active {
  background-color: yellow;
}
Gerry
  • 10,337
  • 3
  • 31
  • 40
  • Well spotted. However, that did not solve the problem –  Jul 01 '17 at 19:35
  • it permanently changes the background color to yellow which is not what I am looking for –  Jul 01 '17 at 19:50
  • please run the code snippet and you will see what I am talking about –  Jul 01 '17 at 19:51
  • But this CSS will not work just for first button, this be applied to any element which has active classs – praveen Jul 01 '17 at 19:53
  • 1
    @AvaLucas ohh, yes current code will only change it once, but you can use `toggleClass` or `removeClass` (as Jose Gomez and Nhon Dinh suggest). – Gerry Jul 01 '17 at 20:13
  • @praveen You are right, this is will change on every element with `active` class. – Gerry Jul 01 '17 at 20:13
1

what you need is a simulation of button click action: the second button act similar as the first one.

  $("#first_btn").mousedown(function(){
     $("#second_btn").addClass("active");
   });
   $("#first_btn").mouseup(function(){
     $("#second_btn").removeClass("active");
   });

You can add event chaining after adding/removing class if you want a real "click" action on second button

Nhon Dinh
  • 221
  • 1
  • 5
0
$("#second_btn").click(function(){
    $('#first_btn').click();
   $('#first_btn').addClass('active');
})
#first_btn.active{
background-color:yellow;
}

This will fire an event click on the first button and also change the color to yellow.

Then define a handler to handle first button click to handle the event

In the fiddle version u provided u are assigning the active class to wrong ID.Also add trigger a click event for first button.

praveen
  • 489
  • 6
  • 12
  • it permanently change the background color which is not what I am looking for –  Jul 01 '17 at 19:49
  • please run the code snippet and you will see what I am talking about –  Jul 01 '17 at 19:50
  • This will only change the color when it has class active.. but when u remove the class active .. you can have other default CSS. @AvaLucas – praveen Jul 01 '17 at 19:52
  • If you don't want the button to be yellow after clicking, in the event handler add as setTimeout function and remove the class active.. @AvaLucas – praveen Jul 01 '17 at 19:55
0

You should give styles for a class, so: 

#first_btn.active{ // not :active
    background-color: yellow;
}

And if you want to simulate click on a first button, you should add smth. like that:

$('#first_btn').click();
Andrii Sukhoi
  • 749
  • 5
  • 14
0

I assume you didn't notice but in the jsFiddle code the jQuery selector for the first button is wrong but in your question here is ok, so I'll ignore that.

The problem is that you are adding a css class but in your css you have declared styles for the :active state of the button, not a class, you can keep that declaration and add the .active class so your css code will look like this:

#first_btn:active,
#first_btn.active {
  background-color: yellow;
}

Adding that class instead of replacing the state (:active) you'll cover both scenarios, when directly click the first_btn and when clicking the second_btn.

ivillamil
  • 108
  • 1
  • 6