Get div id inside another div id with JavaScript

Question

Edited to explain page loading

My HTML page has a div inside another div, both referenced by id, and both unique throughout the document.

<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
...
<body onload=display()>
<div id="rightwork">
<div id="mychart" > </div>
</div>
...

My JavaScript is meant to write something within the 'mychart' div, but I can't manage to reference it :(

The question is related to this one except this one is a class inside an id.

This is my javascript:

function display() {
    var code = "<a onclick=\"second(); return false;\" href=\"#\">Hello</a>";
    document.getElementById('rightwork').innerHTML = code;
}

function second() {
    console.log(document.getElementById('rightwork'));
    console.log(document.getElementById('mychart'));
}

The line

document.getElementById("mychart");

returns null...

Whereas, this one works fine!

document.getElementById("rightwork");

This returns the expected div.

I attempted this

document.getElementById("rightwork").getElementById("mychart");

which of course does not work as getElementById("rightwork") returns a single element.

So, what's the solution to reference the inner div?

If document is loaded correctly why document.getElementById("mychart"); would not work? — eomeroff, Sep 04 '15 at 10:00
@eomeroff you are right actually: I found the error: the HTML I display is generated by function display() and that one does not have getElementById... If I modify var code to: var code = "
Hello
"; It will work. Yet, I wonder why rightwork is found in second() ? — user1381, Sep 04 '15 at 10:43
@user1381 plase check in browser what html was rendered in #rightwork div. I bealive you are replacing #mychard div with content: Hello — eomeroff, Sep 04 '15 at 13:50

score 3 · Answer 1 · answered Sep 04 '15 at 10:04

3

Just use

window.onload = function(){
   var myChart = document.getElementById("mychart");
   // ... code that loads chart
}

Or move

<script type="text/javascript" src="myscript.js"></script>

to the page footer to insure the dom is loaded before running the script

answered Sep 04 '15 at 10:04

andrew

9,313
7
30
61

You are right that this is a page loading issue, although your solution does not solve my particular case (edited). See my comment to eomeroff, I was missing the mychart id in the HTML code I was generating after a click. – user1381 Sep 04 '15 at 10:50

score 1 · Answer 2 · answered Sep 04 '15 at 10:04

Could you please post whole myscript.js content. If document is loaded correctly why document.getElementById("mychart"); would not work?

The thing might be that <div id="mychart" > </div> is not loaded while javascript is executed and <div id="rightwork"> was loaded in that time.

To ensure the document is fully loaded put your <script type="text/javascript" src="myscript.js"></script> at the end of html.

Get div id inside another div id with JavaScript

2 Answers2