Javascript function unhide element seems not calling out var

Question

trying to show a message on the header of my site where should change everyday base on the date. using script below but seems that its not calling the var. as it shows nothing, I don't know which one is miss out on this.

<script type="function/javascritp">
function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}

switch((new Date()).getDay()) {
    case 0:
        // Sunday
        unhide('sun');
        break;
    case 1:
        // Monday
        unhide('mon');
        break;
    case 2:
        // Tuesday
        unhide('tues');
        break;
    case 3:
        // Wednesday
        unhide('wed');
        break;
    case 4:
        // Thursday
        unhide('thurs');
        break;
    case 5:
        // Friday
        unhide('fri');
        break;
    case 6:
        // Saturday
        unhide('sat');
        break;
};
</script>
</head>

<body>

<Header>
<div id="sun" class="hidden">Today is Sunday</div>
<div id="mon" class="hidden">Today is Monday</div>
<div id="tues" class="hidden">Today is Tuesday</div>
<div id="wed" class="hidden">Today is Wednesday</div>
<div id="thurs" class="hidden">Today is Thursday</div>
<div id="fri" class="hidden">Today is Friday</div>
<div id="sat" class="hidden">Today is Saturday</div>
</header>
</body>

Im using css code,

.hidden {
    display: none;
}

Can you check if your script is executed at all? the script declaration `type="function/javascritp"` should be ``type="text/javascript"`` (or omitted) — Me.Name, Jul 19 '15 at 12:30
sorry my mistake, css code was correct it has a period before it. — Rdcelestial, Jul 19 '15 at 12:37
Also, make sure the DOM has been loaded, otherwise getElementById will return nothing (check http://stackoverflow.com/questions/1829925/javascript-getelementbyid-not-working ) — Me.Name, Jul 19 '15 at 12:40
txt should really be text. The e matters for the mime types, as does the `pt` instead of `tp` at the end of javascript. You can check if the script is being executed by adding something like an alert('test'); at the top. Regardless, what's just as important is the getelementbyid part. Added an answer with more info. Hope that tackles it. — Me.Name, Jul 19 '15 at 13:04

score 0 · Answer 1 · answered Jul 19 '15 at 12:20

it must be .hidden not hidden in CSS; you forgot to add a period . , rest all looks good

function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}

switch((new Date()).getDay()) {
    case 0:
        // Sunday
        unhide('sun');
        break;
    case 1:
        // Monday
        unhide('mon');
        break;
    case 2:
        // Tuesday
        unhide('tues');
        break;
    case 3:
        // Wednesday
        unhide('wed');
        break;
    case 4:
        // Thursday
        unhide('thurs');
        break;
    case 5:
        // Friday
        unhide('fri');
        break;
    case 6:
        // Saturday
        unhide('sat');
        break;
};

.hidden{display:none}

<Header>
<div id="sun" class="hidden">Today is Sunday</div>
<div id="mon" class="hidden">Today is Monday</div>
<div id="tues" class="hidden">Today is Tuesday</div>
<div id="wed" class="hidden">Today is Wednesday</div>
<div id="thurs" class="hidden">Today is Thursday</div>
<div id="fri" class="hidden">Today is Friday</div>
<div id="sat" class="hidden">Today is Saturday</div>
</Header>

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

For starters a syntax matter: the script declaration type="function/javascritp" should be type="text/javascript". Not sure how different browsers handle an unknown script type, but chances are the code is not executed at all.

Then an 'issue' when using getElementById. If it is used before the DOM is loaded, the element in question may not exist and getElementById will return null. In the example the script seems to be located in the head section, where it would certainly be an issue. To prevent this, you can call the unhide function in the window.onload event. (more complete info here)

Took the liberty in altering the switch case to an array in this example for a better overview, but the principle stays the same:

<script type="text/javascript">    
function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}

window.onload = function(){
    var day = (new Date()).getDay();       
    var days = ['sun','mon', 'tues', 'wed', 'thurs','fri', 'sat'];
    unhide(days[day]);
};
</script>

Note, that although the unhide function is declared before the unload, it isn't called until used during the onload event. So getElementById is also called at that time.

edited May 23 '17 at 11:43

Community

1
1

answered Jul 19 '15 at 12:49

Me.Name

11,334
3
25
41

already change the type="text/javascript" but it has the same result, still blank result. – Rdcelestial Jul 19 '15 at 13:06
and did you move the switch (or used the code above) to the window.unload? (or moved the entire script to just before the end of the body tag, instead of inside the head tag) – Me.Name Jul 19 '15 at 13:07
I just use the the code above, I dint move it to the end. – Rdcelestial Jul 19 '15 at 13:58
Strange, I can't reproduce a non working situation. Do you have a link or example fiddle where you can reproduce the problem? – Me.Name Jul 19 '15 at 14:36
It works in fiddle. The code already cheked on it and it works perfectly, the thing is when I put it on actual, it wont work I do not know where is the problem. – Rdcelestial Jul 19 '15 at 15:54
Have you checked the console (via F12 for most browsers) for errors? Often the console output gives the information needed to find the problem – Me.Name Jul 20 '15 at 06:30

score 0 · Answer 3 · answered Jul 19 '15 at 13:04

0

The is the easiest to implement in your situation.

function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.classList.remove('hidden');
}

answered Jul 19 '15 at 13:04

Richard McFriend Oluwamuyiwa

914
6
18

Javascript function unhide element seems not calling out var

3 Answers3