How to change the CSS of an HTML element with JavaScript

Question

After reading some questions/answers about this subject I have tried to make it works for me but I can't.

The story line is that I have X elements (so it means no ID just class) and I want to change the background when I click in one.

So with JS I did:

'click .switch' (event) {
    event.toElement.closest("li").css('background-color','black');


    if(this.stateMachine == 'running'){
      Meteor.call("switch", this.nameMachine);
    }

  },

to get the container (here a <li class="liMachine switch">) but I have this error:

event.toElement.closest(...).css is not a function

Despite the event.toElement.closest returns the right element:

So what am I doing wrong ?

Change event.toElement to $(this) or $(event.target). Preferably the former — Rory McCrossan
– Rory McCrossan, Commented Mar 6, 2017 at 13:23
What element is click in your selector? That's not valid HTML, unless you're using some odd library you haven't mentioned — Rory McCrossan
– Rory McCrossan, Commented Mar 6, 2017 at 13:25

caramba · Accepted Answer · 2017-03-06 13:34:55Z

4

$('.liContainer.switch').on('click', function() {
    $(this).toggleClass('active');
});

.active {
  background-color: powderblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="liContainer switch">one</li>
  <li class="liContainer switch">two</li>
  <li class="liContainer switch">three</li>
</ul>

If $(event.target) works for you then the problem was of course that you did not pass a jQuery object. So you can not use jQuery functions on non jQuery object.

edited Mar 6, 2017 at 13:34

answered Mar 6, 2017 at 13:25

caramba

22.5k20 gold badges94 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jerome Over a year ago

in the snippet it works but in my JS nothing happens (I putted some logs but nothing is displayed)

Cristina Jadi Martins · Accepted Answer · 2017-03-06 13:41:09Z

0

Since you are using Meteor, you may prefer this syntax:

"click .switch": function(event){
$(event.target).css("background-color", "black");
}

answered Mar 6, 2017 at 13:41

Cristina Jadi Martins

265 bronze badges

Collectives™ on Stack Overflow

How to change the CSS of an HTML element with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related