Change style attribute with JavaScript

Question

I have a table row of a calendar that I need to go on and off according to the month.

HTML:

<tr id="bottomrow" class="week" valign="top" style="display:none;">
        <td class="day" id="d36">
            <div class="daynumb" id="x36"></div>
        </td>
        <td class="day" id="d37">
            <div class="daynumb" id="x37"></div>
        </td>
        <td class="day" id="d38">
            <div class="daynumb" id="x38"></div>
        </td>
        <td class="day" id="d39">
            <div class="daynumb" id="x39"></div>
        </td>
        <td class="day" id="d40">
            <div class="daynumb" id="x40"></div>
        </td>
        <td class="day" id="d41">
            <div class="daynumb" id="x41"></div>
        </td>
        <td class="day" id="d42">
            <div class="daynumb" id="x42"></div>
        </td>
    </tr>

I tried using document.getElementByID('bottomrow').style.display = "none"; but it doesn't seem to be working...

JavaScript:

function february() {

document.getElementById('bottomrow').style.display = "none";

var numbdays = 28,
    offset = 5;

for (var date = 1; date <= numbdays; date++) {
    document.getElementById("x" + (date + offset)).innerHTML = date;
}
}

When the page loads, the row is still visible. What am I doing wrong?

You are never calling your function. put at the end of the html document — Iesus Sonesson, Feb 16 '13 at 23:24

score 1 · Answer 1 · answered Feb 16 '13 at 23:30

1

You're doing it correctly except getElementByID is not a function. It has to be getElementById. Notice the lowercase d:

document.getElementById("bottomrow").style.display = "none";

answered Feb 16 '13 at 23:30

Alex W

33,401
9
92
97

Thank you... Can't believe I missed that. Haha. – Ryan Fitzgerald Feb 16 '13 at 23:32

score 0 · Answer 2 · answered Feb 16 '13 at 23:19

0

Is the function running before the DOM is ready? It can't operate on elements that don't exist yet.

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

answered Feb 16 '13 at 23:19

isherwood

46,000
15
100
132

You can still bind to the ready event of the document and you probably need to. The other option is to add your JS at the very end of the page. – Paul Mendoza Feb 16 '13 at 23:20
Put the code below the html or in a function which is called after load of the html like body onload="" or smiliar – Iesus Sonesson Feb 16 '13 at 23:21
Lots of ways to go about it. I've added one to my answer. – isherwood Feb 16 '13 at 23:21
It's nicely hidden in that demo, Ryan. Be aware that JSFiddle runs scripts onload by default. – isherwood Feb 16 '13 at 23:38

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

You should be using the proper handling of the ready event for the page because the DOM elements haven't loaded on the page yet. jQuery abstracts this but take a look at this post on how to do it without jQuery or another library. You need to be sure to handle the differences in browsers which the following guide will do.

$(document).ready equivalent without jQuery

edited May 23 '17 at 12:12

Community

1
1

answered Feb 16 '13 at 23:22

Paul Mendoza

5,494
9
47
80

Change style attribute with JavaScript

3 Answers3