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
– eomeroff, Commented Sep 4, 2015 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 = "<div id=\"mychart\"><a onclick=\"second(); return false;\" href=\"#\">Hello</a></div>"; It will work. Yet, I wonder why rightwork is found in second() ? — user1381
– user1381, Commented Sep 4, 2015 at 10:43
@user1381 plase check in browser what html was rendered in #rightwork div. I bealive you are replacing #mychard div with content: <a onclick=\"second(); return false;\" href=\"#\">Hello</a> — eomeroff
– eomeroff, Commented Sep 4, 2015 at 13:50

andrew · Accepted Answer · 2015-09-04 10:04:26Z

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 4, 2015 at 10:04

andrew

9,6039 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1381 Over a year ago

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.

eomeroff · Accepted Answer · 2015-09-04 10:04:20Z

1

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.

answered Sep 4, 2015 at 10:04

eomeroff

9,99530 gold badges102 silver badges143 bronze badges

Collectives™ on Stack Overflow

Get div id inside another div id with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related