Why document.getElementById isn't working in my script?

Question

I'm writing frame website template that uses javascript instead of frames, and I have issue with document.getElementById("contentbody").innerHTML=body[i]; line, but I don't see anything wrong with it. Dev. Console tells me TypeError: document.getElementById(...) is null, which makes no sense, because it's returns null only if there's no element with such id (and there is).

<table style="width: inherit;">
<tr>
<td style="width: 220px;">
    <h2 style="text-align: center;">titlehere</h2>
    <div id='menubody' />
</td>
<td>
    <h1 id='contenttitle' />
    <div id='contentbody' />
</td>
</tr>
</table>
<script>
    var title =
    [
    "&lt;p&gt;",
    "&lt;div&gt;"
    ];
    var body =
    [
    "&lt;p&gt; is for text",
    "&lt;div&gt; is for cool text"
    ];
    function change(i)
    {
        document.getElementById("contenttitle").innerHTML=title[i];
        document.getElementById("contentbody").innerHTML=body[i];
    }
    change(0);
</script>

Any help? Suggestions?

Use double quotes for your html attribute values anyway (`id="contenttitle"`) — gitaarik, Jan 13 '14 at 22:53
double or single quotes it doesn't matter here...tags aren't closed the way they are suppose to be. So weird things are happening. Just to note, if in change function you switch `document.getEle...` the one above with the one below it. It works for weird reason there is no error. — Muhammad Umer, Jan 13 '14 at 22:56
Just to clarify this, `contentbody` is inside of `contenttitle`. So replacing the `innerHTML` of `contenttitle` removes `contentbody` from the document. — Robert, Aug 28 '14 at 02:19

score 8 · Answer 1 · edited Jan 13 '14 at 22:51

8

there is no <h1 /> or <div /> element. What you want are <h1></h1> and <div></div>

edited Jan 13 '14 at 22:51

John H

14,422
4
41
74

answered Jan 13 '14 at 22:51

Ke Vin

2,004
1
18
28

it's not if you want it to do what you need it to do. Browser tries to fix it. And the way it fixes that can mess things up, if it fixes. And then you can expect to get weird things as the op is getting. – Muhammad Umer Jan 13 '14 at 22:58

albusshin · Answer 2 · 2014-01-13T23:12:19.227

3

The tag here

<div id='contentbody' />

You wrote it as <div />, which is wrong as in HTML there is no self-closing div tags (or at least doesn't make sense).

Check div tag on w3schools ,div tag on w3.org and MDN for more details

edited Jan 13 '14 at 23:12

answered Jan 13 '14 at 22:53

albusshin

3,930
3
29
57

Instead of w3schools, would be better if you provide link from w3.org [The div element](http://dev.w3.org/html5/html-author/#the-div-element) or from MDN [
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)
– Givi Jan 13 '14 at 23:03
1

@Givi - Agreed. MDN and spec from W3C are more detailed. Note: The link to W3C should be http://www.w3.org/TR/html5/grouping-content.html#the-div-element – Derek 朕會功夫 Jan 13 '14 at 23:06

score 0 · Accepted Answer · answered Jan 13 '14 at 22:54

Update your <h1> tag to have closing tag. Here is a fiddle.

http://jsfiddle.net/fPsaK/

<table style="width: inherit;">
    <tr>
        <td style="width: 220px;">
             <h2 style="text-align: center;">titlehere</h2>

            <div id="menubody" />
        </td>
        <td>
            <h1 id="contenttitle"></h1>
            <div id="contentbody"></div>
        </td>
    </tr>
</table>

Why document.getElementById isn't working in my script?

3 Answers3