CODEWITHSUNDEEP
javascriptinternet-explorerinternet-explorer-7
PeanutsMonkey
PeanutsMonkey

Reputation: 7105

Internet Explorer 7+ returns the error "Object expected" although none of the other browsers do

Each time I load a page in Internet Explorer 7 or greater I get the error Object Expected when calling the function below. The script appears right at the bottom of the page before the closing </body> tag. There are no elements with the same name or id.

<script type="text/javascript">
     window.onload = show();
</script>

The Javascript function it is attempting to call is

function show() {
    obj1
     = document.getElementById("container").innerHTML
     = '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>'
         + '<p><a href="#" onclick="hide();">test</a></p></div>';
}
  1. Why does this error not appear in any of the other browsers?
  2. What do I need to change to resolve the issue?

EDIT 0

If I move the function show into the same block at window.onload, hide() now no longer works.

Javascript code

function show() {
    obj1
     = document.getElementById("container").innerHTML
     = '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>'
         + '<p><a href="#" onclick="hide();">test</a></p></div>';
}

function hide() {   
    obj1 = document.getElementById("container");
    if(obj1){
        alert("Hi");
        obj1.style.display = "none";
        obj1.style.visibility = "hidden";
    }else{
        alert("Cannot find the element with id container.");
    }
}

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset="UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>takeover</title>

    <base href="" />
    <link rel="stylesheet" href="" />

    <style type="text/css" media="all" />

    #container {
         position:absolute;
         text-align:center;
         background-color:#fff;
         z-index:9999;
    }

    </style>

    <script type="text/javascript" src="takeover.js"></script>
</head>
<body>
    <div>
        <div id="container"></div>
        <p><a href="#">qwe</a></p>
    </div>

<script type="text/javascript">
     window.onload = show;
</script>
</body>
</html>

EDIT 1

Message that appears when using non-Internet Explorer browsers when placing alert(show) before window.onload

enter image description here

EDIT 2

The message displayed after removing all the white spaces. Again this only works in non-Internet Explorer browsers.

enter image description here

EDIT 3

Tried window.show = function show() and window.hide = function hide() however still get an error in Internet Explorer. The error is show as below.

enter image description here

EDIT 4

Here is the updated code with all the functions in a single file. This does not work in any other browser and I get the error show is undefined.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset="UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>takeover</title>

    <base href="" />
    <link rel="stylesheet" href="" />

    <style type="text/css" media="all" />

    #container {
         position:absolute;
         text-align:center;
         background-color:#fff;
         z-index:9999;
    }

    </style>


</head>
<body>
    <div>
        <div id="container"></div>
        <p><a href="#">qwe</a></p>
    </div>

<script type="text/javascript">
    alert(show)
    window.show = function show() {
obj1 = document.getElementById("container").innerHTML =  '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p><p><a href="#" onclick="hide();">test</a></p></div>';
}

window.hide = function hide() { 
    obj1 = document.getElementById("container");
     if(obj1)
 {
   alert("Hi");
   obj1.style.display = "none";
   obj1.style.visibility = "hidden";
 }
 else
 {
   alert("Cannot find the element with id container.");
 }
}
     window.onload = window.show;
</script>
</body>
</html>

Upvotes: 2

Views: 3098

Answers (2)

Ian Boyd
Ian Boyd

Reputation: 257009

Move the <script> block that references container to a point after container is defined:

<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
    <DIV id="container"></DIV>
<script type="text/javascript">
     window.onload = show;

    function show() {
        obj1 = document.getElementById("container").innerHTML =  '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>' +
                                 '<p><a href="#" onclick="hide();">test</a></p></div>';

}
</script>

</BODY>
</HTML>

If the <script> block is, for example, inside the <head> then Internet Explorer gives the error:

SCRIPT5007: Unable to set value of the property 'innerHTML': object is null or undefined

on page load.

Upvotes: 0

user1106925
user1106925

Reputation:

This line...

window.onload = show();

Should be this...

window.onload = show;

...because you need to assign the show function itself to window.onload, not its return value from calling it.

Upvotes: 5

Related Questions