Simple javascript click to add class not working

Question

I am trying to add / remove a class on an element that is clicked liek this

function myFunction() {
    this.classList.add("myclass");
}

#first {
  height: 100px;
  width: 100px;
  background: yellow;
  color: black;
}

.myclass {
    background: red;
    color: white;
}

<div id="first" onclick="myFunction(this)">

  Click
  
  <div class="second">
  </div>
  
  <div class="third">
  </div>
  
</div>

Why is this not working?

Does this answer your question? [The current element as its Event function param](https://stackoverflow.com/questions/4268085/the-current-element-as-its-event-function-param) — pilchard, Oct 17 '21 at 08:56

score 2 · Accepted Answer · answered Oct 17 '21 at 08:52

2

You need to pass reference this into function too like:

function myFunction(el) {
  el.classList.add("myclass");
}

#first {
  height: 100px;
  width: 100px;
  background: yellow;
  color: black;
}

.myclass {
  background: red!important;
  color: white!important;
}

<div id="first" onclick="myFunction(this)">

  Click

  <div class="second">
  </div>

  <div class="third">
  </div>

</div>

PS. add !important into css

answered Oct 17 '21 at 08:52

Simone Rossaini

8,115
1
13
34

3

Don't recommend `!important`, rather define the css to have appropriate [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). (if you need !important with only two styles defined imagine a full stylesheet). – pilchard Oct 17 '21 at 08:57
1

I didn't recommend it, I just fixed the JS problem and added a quick CSS rule to show the final result. – Simone Rossaini Oct 17 '21 at 09:04

score 1 · Answer 2 · answered Oct 17 '21 at 09:09

Pass the this to the defined function too and check the existence of the class. Try this.

function myFunction(el) {
  if(!el.classList.contains("myclass")) {
    el.classList.add("myclass");
    console.log("added");
  } else {
    el.classList.remove("myclass");
    console.log("removed");
  }
}

#first {
  height: 100px;
  width: 100px;
  background: yellow;
  color: black;
}

.myclass {
    background: red;
    color: white;
}

<div id="first" onclick="myFunction(this)">

  Click
  
  <div class="second">
  </div>
  
  <div class="third">
  </div>
  
</div>

score 1 · Answer 3 · answered Oct 17 '21 at 09:40

It doesn't work because this for inline handlers works differently. You can use .call, and that works... but that's still not good.

function myFunction() {
  this.classList.add("myclass");
}

#first {
  height: 100px;
  width: 100px;
  background: yellow;
  color: black;
}

.myclass {
  background: red !important;
  color: white;
}

<div id="first" onclick="myFunction.call(this)">
  Click
  <div class="second">
  </div>
  <div class="third">
  </div>
</div>

You should avoid inline script altogether and also avoid id selectors in CSS.

Change your id selector to a class selector and change your inline handler to an event listener.

Also, stray strings like "content" are a real pain as your project grows in size. Wrap them in a <span>

const myButton = document.querySelector(".first");

myButton.addEventListener("click", ({
  target
}) => target.classList.add("myclass"))

.first {
  height: 100px;
  width: 100px;
  background: yellow;
  color: black;
}

.myclass {
  background: red;
  color: white;
}

<div class="first">
  <span>Click</span>
  <div class="second"></div>
  <div class="third"></div>
</div>

score 1 · Answer 4 · answered Oct 17 '21 at 09:57

You are facing 2 issues :

you pass this as a parameter to the onclick event, but don't get it in the function definition (), so you can fix it like below ;
id selector is more specific than class selector, so it always take precedence. You can use a class instead of an id for first div, and then your css rule works :)

function myFunction(el) {
    el.classList.add("myclass");
}

.first {
  height: 100px;
  width: 100px;
  background: yellow;
  color: black;
}

.myclass {
    background-color: red;
    color: white;
}

<div class="first" onclick="myFunction(this);">

  Click
  
  <div class="second">
  </div>
  
  <div class="third">
  </div>
  
</div>

Simple javascript click to add class not working

4 Answers4