jQuery CSS on button click not working

JavaScript
1

So this is my HTML:

<div class="guiSwitch">
   <button class="guiSwitchItem" id="#containerBtn">Flex Container</button>
   <button class="guiSwitchItem" id="#itemsBtn">Flex Items</button>
 </div>
<!-- line 126 - 129  -->

My JS

$("#containerBtn").click(function() {
  $("#containerBtn").css("background-color": "#78a7e8", "color": "white");
  $("#itemsBtn").css("background-color": "#ededed", "color": "black");
});

My pen: https://codepen.io/Mike-was-here123/pen/MqJZdb?editors=1010

My question is, why does the buttons not change color when i hit them? I am targeting the ID’s and doing css(). I can’t find any errors in the console either.

2

Two issues:

  1. Your JavaScript is targeting an element with div=“containerBtn”, but instead your html shows an element (button) with an id=“#contaiinerBtn”.

  2. When you style more than one CSS property in the same call to the css method, you must supply an object with property/value pairs. You just need to wrap your existing call inside { and }.

1 Like
3

I constantly make the mistake of putting # in my ID on HTML, don’t know how i didn’t see it. Thanks so much.