JavaScript change class of HTML element

Question

I want to change the class="filter" to class="active filter" depending on the system day. I know how to get the system day but am unable to change the class. Can anyone help me please on this?

<li id="0"><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
<li id="1"><a href="javascript:;" data-filter=".monday" class="filter"> Monday</a></li>
<li id="2"><a href="javascript:;" data-filter=".tuseday" class="fiter">Tuesday </a></li>
<li id="3"><a href="javascript:;" data-filter=".wednesday" class="filter"> Wednesday</a></li>
<li id="4"><a href="javascript:;" data-filter=".thursday" class="filter"> Thursday</a></li>

<li id="0"><a href="javascript:;" data-filter="all" class="active filter">All</a></li> <li id="1"><a href="javascript:;" data-filter=".monday" class="filter"> Monday</a></li> <li id="2"><a href="javascript:;" data-filter=".tuseday" class="fiter">Tuesday </a></li> <li id="3"><a href="javascript:;" data-filter=".wednesday" class="filter"> Wednesday</a></li> <li id="4"><a href="javascript:;" data-filter=".thursday" class="filter"> Thursday</a></li> — Ryan Ali
– Ryan Ali, Commented Sep 6, 2017 at 1:45

Chava Geldzahler · Accepted Answer · 2017-09-06 02:24:01Z

1

To change the class with JavaScript:

element.classList.add     // adds a class
element.classList.remove  // removes a class

You would loop over the elements, and add the active class to the one that matches your system day. (You can use getAttribute('data-filter') to compare with your system day.)

var sysDay = 'monday';

var activeDay = function(sysDay) {
  var days = document.getElementsByClassName('day');
  for (var i=0; i<days.length; i++) {
    // remove active class
    days[i].classList.remove('active');
    // add active class only if matches system day
    if ( (days[i].getAttribute("data-filter")) == sysDay )
    {
      days[i].classList.add('active');
    }  
  }
}

activeDay(sysDay);

.active {
  color: red;
}

<li id="0"><a href="javascript:;" data-filter="all" class="active filter day">All</a></li>
<li id="1"><a href="javascript:;" data-filter="monday" class="filter day"> Monday</a></li>
<li id="2"><a href="javascript:;" data-filter="tuseday" class="fiter day">Tuesday </a></li>
<li id="3"><a href="javascript:;" data-filter="wednesday" class="filter day"> Wednesday</a></li>
<li id="4"><a href="javascript:;" data-filter="thursday" class="filter day"> Thursday</a></li>

edited Sep 6, 2017 at 2:24

answered Sep 6, 2017 at 2:08

Chava Geldzahler

3,7501 gold badge20 silver badges32 bronze badges

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

2 Comments

Ryan Ali Over a year ago

I dont know what I am doing wrong. Non of the solution is working for me. What I want to do is to select the day according to the system day on this page. www.nightclubslondon.com/london_nightclubs.html.. Please help me.

Chava Geldzahler Over a year ago

What is the format of the data that is being returned from the system? You need to make sure that the value of the data-filter attribute matches it exactly. I see that your values for data-filter start with a period. You should definitely remove that, as they are not valid JavaScript variables.

jafaircl · Accepted Answer · 2017-09-06 01:50:22Z

0

var listItem = document.getElementById('0')
listItem.classList.toggle('active');

You should probably change your ids though

answered Sep 6, 2017 at 1:50

jafaircl

9747 silver badges6 bronze badges

1 Comment

Ryan Ali Over a year ago

I don't know what I am doing wrong. None of the solutions are working for me. What I want to do is to select the day according to the system day on this page. www.nightclubslondon.com/london_nightclubs.html

TaBo · Accepted Answer · 2017-09-06 02:03:03Z

<ul class="text-center">
<li id="1"><a href="#" data-filter=".monday" class="filter"> Monday</a></li>
<li id="2"><a href="#" data-filter=".tuseday" class="fiter">Tuesday </a></li>
<li id="3"><a href="#" data-filter=".wednesday" class="filter"> Wednesday</a></li>
<li id="4"><a href="#" data-filter=".thursday" class="filter"> Thursday</a></li>
<li id="5"><a href="#" data-filter=".friday" class="filter">Friday</a></li>
<li id="6"><a href="#" data-filter=".saturday" class="filter"> Saturday</a></li>
<li id="0"><a href="#" data-filter=".sunday" class="filter"> Sunday</a></li>
</ul>

 <script>
    ActiveDay();
    function ActiveDay()
    {
        var day = new Date().getDay();

        for (var i = 0; i < 7; i++)
        {
            $("#" + i + ">a").attr("class", "filter");
        }

        $("#" + day + ">a").attr("class","active filter");
    }

  </script>

Collectives™ on Stack Overflow

JavaScript change class of HTML element

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related