Why it not work in document.onload?

Question

<script>
window.onload= function(){
var a = document.getElementById('a');
var b = document.getElementById('ct');
setInterval('b.innerHTML = a.duration',1000);
};
</script>
//Second  script
<script>
var a = document.getElementById('a');
var b = document.getElementById('ct');
window.onload= function(){
setInterval('b.innerHTML = a.duration',1000);
};
</script>

Why the first script not working ?. Chrome : Uncaught ReferenceError: b is not defined

Answer 1

You need to specify a function as argument to the setInterval, you have problem here:

setInterval('b.innerHTML = a.duration',1000);

Should be:

setInterval(function foo(){b.innerHTML = a.duration},1000);

Answer 2

My guess would be: because you use var on a and b in the first script. This makes the variables local ones in window.onload (instead of global), and the code in setInterval cannot access them.

Remove the var and it should work.

Answer 3

You can not reference the documents elements in .onload because the document hasn't been loaded there yet. Move the code to the end of the document just before </body>.

It also avoids problems with multiple event handlers in .onload as you are actually overwriting any pre-existing eventhandlers. Use addEventListener for attaching eventhandlers.

like this:

<body>

// markup

<script>
var a = document.getElementById('a');
var b = document.getElementById('ct');


setInterval('b.innerHTML = a.duration',1000);

</script>

</body>

Answer 4

setInterval runs in the global scope. Any variables you refer to in setInterval that are not accessible from the global scope -- like the local a and b in the first example -- will be undefined at execution time.

Answer 5

in the first script "a" and "b" are a variables defined in the scope of the event. The "setInterval" looks for the "innerHTML" property in the document (global) scope. In the second sample "a" and "b" are outside the event definition, i.e. defined directly in the document scope so they are reconized by the "setInterval" function.