timing conflict with innerHTML

[kezkankrayon]

am having trouble with a timing issue concerning 'innerHTML' and have been unsuccessful in addressing this problem after numerous hours.

ideally statements only get executed after the previous statement has been completed however this is not wholly true depending on your point of view. while the initial statement of setting the innerHTML has been completed, the content is still not accessible for a short period of time.

below is a code illustrating the bare bones of the problem ->

<script type="text/javascript">
window.onload = write;
function write(){
document.getElementById("content").innerHTML ='<div id="menu">menu</div><div id="scrolling_div" style="width:800px; height:700px;overflow:auto">scrolling_div</div>';
check;
}

function check() {
document.getElementById("menu").innerHTML ="menu works";
document.getElementById("scrolling_div").innerHTML ="scrolling_div works";
}
</script>
<a href="javascript:check()"> check </a>
<div id="content"></div>

the result of the check function can not be displayed because the content was still not accessible.

to check that there was nothing wrong with the 'check function' it was called by '<a href="javascript:check()">'

hoping someone can help me out.

cheers, C

[shyam]

well it works for me...but, this is a problem that is inherent to innerHTML as the browser has to parse it and add it to the document DOM. if you have to immediately access the elements that you inserted use the DOM methods instead

[j3n0vacHiLd]

am having trouble with a timing issue concerning 'innerHTML' and have been unsuccessful in addressing this problem after numerous hours.

ideally statements only get executed after the previous statement has been completed however this is not wholly true depending on your point of view. while the initial statement of setting the innerHTML has been completed, the content is still not accessible for a short period of time.

below is a code illustrating the bare bones of the problem ->

<script type="text/javascript">
window.onload = write;
function write(){
document.getElementById("content").innerHTML ='<div id="menu">menu</div><div id="scrolling_div" style="width:800px; height:700px;overflow:auto">scrolling_div</div>';
check;
}

function check() {
document.getElementById("menu").innerHTML ="menu works";
document.getElementById("scrolling_div").innerHTML ="scrolling_div works";
}
</script>
<a href="javascript:check()"> check </a>
<div id="content"></div>

the result of the check function can not be displayed because the content was still not accessible.

to check that there was nothing wrong with the 'check function' it was called by '<a href="javascript:check()">'

hoping someone can help me out.

cheers, C

Where you call your check() function from within your write() function, it requires that you use the brackets ()

So change your write() function to...

function write(){
document.getElementById("content").innerHTML ='<div id="menu">menu</div><div id="scrolling_div" style="width:800px; height:700px;overflow:auto">scrolling_div</div>';
check();
}

The reason it didn't need the brackets when you used ...

window.load = write;

... is because that's a reference or pointer to a function, instruction that you want to make a call to the function write()

[Kor]

write is a javascript reserved word, it nominates the write() method. Better use another word for your function, say Write()...