The class (.is-toggled) is added when clicked on the button , but the styles for the button when clicked is not getting applied...

.is-toggled {
  background-color: lightgray;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.gaming-btn {
  background-color: black;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

<button class="gaming-btn" onclick="
     const btn = document.querySelector('.gaming-btn');

      if(btn.classList.contains('is-toggled')) {
        btn.classList.remove('is-toggled')
      } else {
        btn.classList.add('is-toggled');
      }
    ">Gaming</button>

The class (.is-toggled) is added when clicked on the button , but the styles for the button when clicked is not getting applied...

.is-toggled {
  background-color: lightgray;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.gaming-btn {
  background-color: black;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

<button class="gaming-btn" onclick="
     const btn = document.querySelector('.gaming-btn');

      if(btn.classList.contains('is-toggled')) {
        btn.classList.remove('is-toggled')
      } else {
        btn.classList.add('is-toggled');
      }
    ">Gaming</button>

• javascript
• html
• css

• 5 I really wouldn't put whole code blocks inline in an onclick attribute like that. It's a readability and maintenance nightmare, hard to debug and easy to make silly syntax errors. Most people would advise you to use unobtrusive event handlers instead - as per Ori Dori's answer, below. If you insist on using inline event attributes, at least make it call a function instead of directly having the code block inside the attribute. – ADyson Commented Mar 19 at 10:44
• 2 Your css is not being applied because of the order of the class definitions. So the is-toggled background-color is being overridden by gaming-btn style. Move the is-toggled so it's after gaming-btn (this is mentioned in the answer, but not highlighted as the cause of the issue). – fdomn-m Commented Mar 19 at 10:52
• 2 see: What is the order of precedence for CSS? or n which order do CSS stylesheets override? – pilchard Commented Mar 19 at 11:01

2 Answers 2

Because the .is-toggled class is defined before the .gaming-bth it can't override the styles. Switch the classes order to fix the problem.

You can use classList.toggle to toggle a class name.

const btn = document.querySelector('.gaming-btn')

btn.addEventListener('click', () => {
  btn.classList.toggle('is-toggled')
});

.gaming-btn {
  background-color: black;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.is-toggled {
  background-color: lightgray;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

<button class="gaming-btn">Gaming</button>

As Ori Drori already pointed out, you can use the toggle function. But I will go with your code and make it work:

function myClick(btn) {
      if(btn.classList.contains('is-toggled')) {
        btn.classList.remove('is-toggled')
      } else {
        btn.classList.add('is-toggled');
      }
}

.gaming-btn.is-toggled {
  background-color: lightgray;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.gaming-btn {
  background-color: black;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

<button class="gaming-btn" onclick="myClick(this)">Gaming</button>

So you may wonder what was changed. First, I moved your custom code out from the onclick into a function and call it instead of hard-coding it as a string. I'm also passing this to the function and btn is a parameter instead of querying for the button you just clicked on.

But, more importantly, you had two CSS rules and they contradicted each-other. The two rules were of the same specificity, that is, both of them were appliable in the presence of a CSS class, albeit a different class. CSS in the case of same-specificity rules has the latter rule override the first. So the solution I applied above (which is not the only possible solution) is to increase the specificity of the first, which I did by adding the other class.