ansaurus

Question

Problem with function calls [javascript]

Answer 1

+3 A:

Script is executed as soon as it is parsed. If image1 and image2 haven't been parsed when the script is executed, document.getElementById("image1") will return null so .style.display will throw a "is null or not an object error". This explains why the two alerts work - execution stops at the first document.getElementById(id).style.display == "none" line.

Move the script to after the image elements in the document and it should work.

<script>
    alert(document.getElementById("image1")); // -> null
</script>
<img id="image1" src="some/image.jpg" />
<script>
    alert(document.getElementById("image1")); // -> object
</script>

Andy E 2010-05-24 09:50:49

of course *dow* thanks!

Samuel 2010-05-24 09:53:58

Answer 2

A:

Are you missing this?

alert('now visible');
document.getElementById(id).style.display = "block";

Pandiya Chendur 2010-05-24 09:51:38

No that works without :)

Samuel 2010-05-24 09:55:48

@Samuel Andy's answer is worth a try..

Pandiya Chendur 2010-05-24 09:57:24

@Pandiya: i know, it is the solution, i cant mark it answered yet though, have to wait 2 more min

Samuel 2010-05-24 09:59:33

Answer 3

A:

Try this http://jsfiddle.net/hUDb4/

var toggle = (function() {
    // an object to keep state for elements
    var state = {};
    return function(id){
        document.getElementById(id).style.display = (state[id] = !state[id]) ? "none" : "block";
    };
})();


toggle("myid"); // none
toggle("myid"); // block

But the main issue here is as others has stated that the DOM isn't ready until the document is fully loaded.

Sean Kinsey 2010-05-24 09:51:38

Answer 4

A:

Hi, you have used alert in the body onload. basically once the alert will get executed, then it asks you to click OK. meanwhile the last function may gets delayed focus.

see below

<script>
    alert(document.getElementById("image1"));
    <img id="image1" src="some/image.jpg" />
    alert(document.getElementById("image1"));
</script>

VAC-Prabhu 2010-05-24 09:57:05

That's some fantastic copy-pasting.

Andy E 2010-05-24 09:58:39

Answer 5

A:

Ummm, ideally you should hide the images via CSS (<div id="image1" style="display: none;"></div>); then unhide them once the document is loaded. People saying that the DOM is not available when you call the function first time are right. Or may be its just the two DIVs that are not available because you declare them in the source after calling the toggle function.

Salman A 2010-05-24 10:07:05

ansaurus

tags:

views:

answers:

Problem with function calls [javascript]

related questions