CODEWITHSUNDEEP
javascript
buckethead12
buckethead12

Reputation: 1

How to you change the text color of the current date using the getDate method?

The output doesn't change the color of the current date. When I add in a sample alert statement within the case statement, the alert works. When I remove that and add in the style.color = "red", the current date doesn't turn red. Why is that? 

<head>

<script>

switch (new Date().getDay()) {
    case 0: 
        document.getElementById("sun").style.color = "red";
        break;
    case 1:
        document.getElementById("mon").style.color = "red";
        break;
    case 2:
        document.getElementById("tues").style.color = "red";
        break;
    case 3:
        document.getElementById("wed").style.color = "red";
        break;
    case 4:
        document.getElementById("thur").style.color = "red";
        break;
    case 5:
        document.getElementById("fri").style.color = "red";
        break;
    case  6:
        document.getElementById("sat").style.color = "red";
        break;
}

</script>   

</head>

<body>
    <table>
        <tr>
            <td><p id="sun">Sun</p></td>
            <td><p id="mon">Mon</p></td>
            <td><p id="tue">Tue</p></td>
            <td><p id="wed">Wed</p></td>
            <td><p id="thur">Thur</p></td>
            <td><p id="fri">Fri</p></td>
            <td><p id="sat">Sat</p></td>                        
        </tr>
    </table>                    
</body>
</html>

Upvotes: 0

Views: 319

Answers (4)

b00t
b00t

Reputation: 419

As already stated, move the script tag after the table, or if it's not an option, create the code as a function and then execute it on page load (you can add this at the end of the script tag):

window.onload = functionName;

Also, might I offer a shorter version of your code:

document.getElementsByTagName('p')[new Date().getDay()].style.backgroundColor = 'red';

( Edit: didn't notice that you use the 'Sunday first format', but you catch my drift :-) )

Upvotes: 0

9ers Rule
9ers Rule

Reputation: 164

The problem is you are not waiting for the window to load and the script runs first. You need to define a window.onload function to handle this.

I took your code and fixed it in a plnkr:

added to your head section: 

window.onload = function () { 
     ...
}

Your code working now

Upvotes: 0

Saransh Kataria
Saransh Kataria

Reputation: 1497

Move the script tag below the body section, it gets executed first when the elements have not been rendered in the DOM and hence you do not get the colours.

Upvotes: 1

William_Wilson
William_Wilson

Reputation: 1264

2 isssues:

1 you use 'tues' in your switch, but the id is 'tue'. Second currently you call the js in head before the body elements exist. Try something like:

<html>
<head>

<script type='text/javascript'>

function highlightDate()
{
switch (new Date().getDay()) {
    case 0: 
        document.getElementById("sun").style.color = "red";
        break;
    case 1:
        document.getElementById("mon").style.color = "red";
        break;
    case 2:
        document.getElementById("tue").style.color = "red";
        break;
    case 3:
        document.getElementById("wed").style.color = "red";
        break;
    case 4:
        document.getElementById("thur").style.color = "red";
        break;
    case 5:
        document.getElementById("fri").style.color = "red";
        break;
    case  6:
        document.getElementById("sat").style.color = "red";
        break;
    }
}

</script>   

</head>

<body>
<table>
    <tr>
        <td><p id="sun">Sun</p></td>
        <td><p id="mon">Mon</p></td>
        <td><p id="tue">Tue</p></td>
        <td><p id="wed">Wed</p></td>
        <td><p id="thur">Thur</p></td>
        <td><p id="fri">Fri</p></td>
        <td><p id="sat">Sat</p></td>                        
    </tr>
</table>

<script type='text/javascript'>highlightDate();</script>
</body>
</html>

Note, the JS is very repetitive and could definitely be cleaned up.

Upvotes: 0

Related Questions