Calendar highlight current date automatically

Kyrus KW 0
Viewed 32

I'm making a calendar with HTML, CSS and JavaScript. I want it to highlight current date automatically. Here is my code:

hday();

function hday() {
    var d = new Date().getDate();
    document.getElementById(d).classList.add('today'); 
}
.today { 
    background: red; 
}
<ul class="days">
    <li id="01">1</li>
    <li id="02">2</li>
    <li id="03">3</li>
    <li id="04">4</li>
    <li id="05">5</li>
    <li id="06">6</li>
    <li id="07">7</li>
    <li id="08">8</li>
    <li id="09">9</li>
    <li id="10">10</li>
    <li id="11">11</li>
    <li id="12">12</li>
    <li id="13">13</li>
    <li id="14">14</li>
    <li id="15">15</li>
    <li id="16">16</li>
    <li id="17">17</li>
    <li id="18">18</li>
    <li id="19">19</li>
    <li id="20">20</li>
    <li id="21">21</li>
    <li id="22">22</li>
    <li id="23">23</li>
    <li id="24">24</li>
    <li id="25">25</li>
    <li id="26">26</li>
    <li id="27">27</li>
    <li id="28">28</li>
    <li id="29">29</li>
    <li id="30">30</li>
    <li id="31">31</li>
  </ul>

However, the current date is not highlighted. From chrome developer tools, I found that "background : red" didn't apply to the date today. How to make it work?

I just started HTML and CSS, so sorry for basic Questions.

highlight calendar javascript css html
1 Answers

Your issue is with order of operations. You need to call the method hday() after you define it.

You have:

hday();

function hday() {
    var d = new Date().getDate();
    document.getElementById(d).classList.add('today'); 
}

You need: 

function hday() {
    var d = new Date().getDate();
    document.getElementById(d).classList.add('today'); 
}

hday();
.today { 
background: red; 
}
<ul class="days">
    <li id="01">1</li>
    <li id="02">2</li>
    <li id="03">3</li>
    <li id="04">4</li>
    <li id="05">5</li>
    <li id="06">6</li>
    <li id="07">7</li>
    <li id="08">8</li>
    <li id="09">9</li>
    <li id="10">10</li>
    <li id="11">11</li>
    <li id="12">12</li>
    <li id="13">13</li>
    <li id="14">14</li>
    <li id="15">15</li>
    <li id="16">16</li>
    <li id="17">17</li>
    <li id="18">18</li>
    <li id="19">19</li>
    <li id="20">20</li>
    <li id="21">21</li>
    <li id="22">22</li>
    <li id="23">23</li>
    <li id="24">24</li>
    <li id="25">25</li>
    <li id="26">26</li>
    <li id="27">27</li>
    <li id="28">28</li>
    <li id="29">29</li>
    <li id="30">30</li>
    <li id="31">31</li>
  </ul>

dale landry0
Related