Adding class with javascript doesn't work as expected

Question

It should detect the today's day and color that day. Eg today is Saturday so the word "Saturday" Should be red. I don't know why it doesn't work all of my code seems correct.

My problem is that my code doesn't work either with javascript or jquery

Demo here: https://www.w3schools.com/code/tryit.asp?filename=FHSS5KGYJZHA

code:

  var d = new Date();
                     var n = d.getDay();
                     var res = document.getElementsByClassName("week-day");
          

          

                     if(n===0) //sunday
                     {
                          res.className += " today";;
                     }
                     else if(n===1) //monday
                     {
                         res.className += " today";
                     }
                     else if(n===2)
                     {
                          res.className += " today";
                     }
                     else if(n===3)
                     {
                          res.className += " today";
                     }
                     else if(n===4)
                     {
                         res.className += " today";
                     }
                     else if(n===5)
                     {
                    res.className += " today";                     }
                     else if(n===6) //saturday
                     {
                        res.className += "today";

                        
                     }

.today{
color:red;
}

<div class="span3">
                    <div class="opening-time">
                        <div class="time-table">
                            <h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3>
                            <div class="inner-bg">
                                <dl id="asd" class="week-day">
                                    <dt>Monday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Tuesday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day ">
                                    <dt>Wednesday</dt>
                                    <dd>8:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Thursday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day">
                                    <dt>Friday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd"  class="week-day  light-bg">
                                    <dt>Saturday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day closed">
                                    <dt>Sunday</dt>
                                    <dd>CLOSED</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

Duplicate? No it is not. My problem is that my code doesn't work — , Jul 22 '17 at 09:25
Well he's not wrong : your problem is that res=document.getElementsByClassName("week-day"); return an array of object, not just the one you want. You need to catch the dl corresponding to yhe actual day, you have to look at what getElementsByClassName returns. For your problem you can take a look at my answer, but it's jQuery based. — Pierre Granger, Jul 22 '17 at 09:29

Pierre Granger · Accepted Answer · 2017-07-22T09:32:40.193

Sorry for jQuery but it's easier for me

jQuery(document).ready(function(){

  var d = new Date();
  var n = d.getDay();
  if ( n == 0 ) n = 7 ; // Just for your sunday

 jQuery('div.inner-bg dl:nth-child('+n+')').addClass('today') ;

}) ;

.today{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span3">
                    <div class="opening-time">
                        <div class="time-table">
                            <h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3>
                            <div class="inner-bg">
                                <dl id="asd" class="week-day">
                                    <dt>Monday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Tuesday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day ">
                                    <dt>Wednesday</dt>
                                    <dd>8:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Thursday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day">
                                    <dt>Friday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd"  class="week-day  light-bg">
                                    <dt>Saturday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day closed">
                                    <dt>Sunday</dt>
                                    <dd>CLOSED</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

why Saturday is not red? All I want to do is to color the today's day for example . Today it will color Saturday tomorrow sunday ,etc — , Jul 22 '17 at 09:30
why I should include jquery library just above the script? It doesn't work when I have it right before the closing body tag. It doesn't work when I put the code in different file as well. — , Jul 22 '17 at 09:38
code works but can you explain a bit? Like wtf you did this in 5 lines I was trying it with 20+ XD. what is this: 'div.inner-bg dl:nth-child('+n+')'). also what is that code you commented just for sunday — , Jul 22 '17 at 09:43
When you did `res=document.getElementsByClassName("week-day");` your where catching all the elements with classname week-day, not only the actual day. With the jQuery selector` jQuery('div.inner-bg dl:nth-child('+n+')').addClass('today') ;`, i catch only 1 élement : the n'th dl child of inner-bg. If saturday is the 6th day, it's also the 6'th dl in your div.inner-bg, so i just ask jQuery to give me the 6th child in it. You can take a look at nth-child selector here, but it's the same think as css : https://api.jquery.com/nth-child-selector/ — Pierre Granger, Jul 22 '17 at 09:47
Your comment is : 2017-07-23 08:15:04Z... it that monday for you ? not for me... — Pierre Granger, Jul 23 '17 at 11:14

Adding class with javascript doesn't work as expected

1 Answers1