Why doesn't classList.add work for html onClick

Question

I am trying to create a dynamic calendar. My first step is to add classes on to certain elements on click But, I ran into a problem along the way, classList.add(''); isnt working in the HTML. I could be doing something wrong I am not sure.

<ul class="days">
  <li onClick='#'>1<li>
  <li onclick="this.classList.add('active')">2</li>
  <li onClick='#'>3</li>
  <li onClick='#'>4</li>
  <li onClick='#'>5</li>
  <li onClick='#'>6</li>
  <li onClick='#'>7</li>
  <li onClick='#'>8</li>
  <li onClick='#'>9</li>
  <li onClick='#'><span class="active">10</span></li>
</ul>

CSS

  /* Highlight the "current" day */
   .days li .active {
      padding: 5px;
      background: #1abc9c;
      color: white 
   }

I am trying to apply the onclick event to the number 2. But classList.add(''); isnt working. I'm sure theres a reason... any help would be appreciated.

It works for me. How are you testing to check if the class is added or not? — Maheer Ali
– Maheer Ali, Commented May 3, 2019 at 12:32
@MaheerAli I have alot more of the html, this is just a small snippet of it. I am using my browser to check the onClick function, if it added the class then the background color should change — Dat Boi
– Dat Boi, Commented May 3, 2019 at 12:34
It seems to be working fine, though there are some html syntax errors. 1: you are not closing the first li. 2: you are using lower case onclick for the second li. It would also be easier to test it if you had used a snippet instead of plain code section. — nick zoum
– nick zoum, Commented May 3, 2019 at 12:35

sjahan · Accepted Answer · 2019-05-03 12:38:27Z

2

It does not work because of your CSS rule or your DOM.

.days li .active applies the style on a child node of <li> with the class active, but using this.classList.add('active'), you add the class active on the <li> tag and the CSS rule should be .days li.active.

edited May 3, 2019 at 12:38

answered May 3, 2019 at 12:37

sjahan

5,9804 gold badges24 silver badges46 bronze badges

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

2 Comments

Dat Boi Over a year ago

thankyou. This was a perfect fix! Cheers! I will accept your answer as soon as I can

sjahan Over a year ago

@DatBoiTrump Glad it helped ;) CSS can be tricky, one space can be troublesome!

R3tep · Accepted Answer · 2019-05-03 12:37:57Z

1

Your css selector is wrong, you need to remove the space between li and .active

like

.days li.active {
  padding: 5px;
  background: '#1abc9c';
  color: white 
}

answered May 3, 2019 at 12:37

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

Comments

Luke · Accepted Answer · 2019-05-03 12:39:26Z

First of all your html is wrong for the first li element.

Second I think that maybe you are being misled by your css selector, since the 10th li element has a span inside whilst the 2nd doesn't. Check out this fiddle

https://jsfiddle.net/h6w7kaoy/1/

HTML:

 <ul class="days">
      <li onClick='#'>1</li>
      <li onClick="this.classList.add('active')">2</li>
      <li onClick='#'>3</li>
      <li onClick='#'>4</li>
      <li onClick='#'>5</li>
      <li onClick='#'>6</li>
      <li onClick='#'>7</li>
      <li onClick='#'>8</li>
      <li onClick='#'>9</li>
      <li onClick='#'><span class="active">10</span></li>
    </ul>

CSS:

li.active, li span.active {
  color: blue;
  font-weight: bold;
}

If you try to remove li.active from the css selector, you will see that clicking on the li element will not affect the visuals (but the class is still being added ;-) )

Maheer Ali · Accepted Answer · 2019-05-03 12:40:21Z

0

The problem is not with classList the problem is the selector. .days li .active will select all the elements with class active which are inside <li> and li is inside element with class .days. There shouldn't be any space b/w li and .active

.days li.active

answered May 3, 2019 at 12:40

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Collectives™ on Stack Overflow

Why doesn't classList.add work for html onClick

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related