HTML Javascript getElementById for <img> image returns null

Question

Oh where oh where has my img tag gone?

I have the following HTML. I am using an OnClick for the searchTopPanel div to toggle the searchPopDown visbility. As part of this I want to dynamically change the src of an img - to indicate collapse/expand. Here is the HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #searchTopPanel
        {
            background-color: rgb(155,154,211);
        }
    </style>
    <script type="text/javascript">
        function toggleSearch() {
            var style = document.getElementById("searchPopDown").style;
            var img = document.getElementById("xxxx");

            style.display = (style.display != "none") ? "none" : "block";
            img.src = (img.src != "images/expand.png") ? "images/expand.png" : "images/collapse.png";
        }
    </script>
</head>
<body>
    <div id="mainSearch">
        <div id="searchTopPanel" onclick="toggleSearch()" style="cursor:pointer">
            <span>Advanced Search</span>
            <img id="xxxx" src="images/expand.png" alt="" />
        </div>
        <div id="searchPopDown" style="display:none">
            <span>Search Options</span>
            <div id="searchOptions">
                <table>
                <tr><td>Summary</td><td>
                    <select id="Select1">
                        <option>Contains</option>
                        <option>Does not contain</option>
                        <option>Equal to</option>
                        <option>Not equal to</option>
                    </select></td><td>
                        <input id="Text1" type="text" /></td></tr>
                </table>                
            </div>
            <input id="search" type="submit" value="Search" />
        </div>
    </div>
</body>
</html>

I have named my img xxxx. I've tried various things to find it.
I am running this from VS2010 with IE9. I have the advantage(dis) of being able to debug javascript, and it would appear xxxx is null when I call var img = document.getElementById("xxxx"); .

Just hope I am being stupid this morning and missed something obvious.

Any thoughts?

Thanks,

Andez

I copied all of your code into a jsfiddle, added an alert(img) just after you set the img variable, and it is not null: jsfiddle.net/nnnnnn/qBcje — nnnnnn
– nnnnnn, Commented Aug 15, 2012 at 10:56

Fenton · Accepted Answer · 2012-08-15 10:56:30Z

2

I have put together a JS Fiddle to demonstrate that your JavaScript works.

With this in mind, I would suggest that your image paths are not correct.

Perhaps:

images/expand.png

Should be:

/images/expand.png

Or maybe the image locations / names are wrong.

answered Aug 15, 2012 at 10:56

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

1 Comment

Andez Over a year ago

Thanks for that. Looks like I needed to refresh the browser as stopping and starting VS2010 did not actually refresh the page content.

Sune Trudslev · Accepted Answer · 2012-08-15 10:57:24Z

1

img.src is expanded to the full url. Try this:

    function toggleSearch() {
        var style = document.getElementById("searchPopDown").style;
        var img = document.getElementById("xxxx");

        style.display = (style.display != "none") ? "none" : "block";
        img.expanded = !img.expanded || false;
        img.src = (img.expanded ? "images/expand.png" : "images/collapse.png");
    }

answered Aug 15, 2012 at 10:57

Sune Trudslev

9846 silver badges11 bronze badges

1 Comment

Andez Over a year ago

Ok. Looks like IE & VS2010 were playing funny $$%£"!. I stopped running and put the alert in the java script. Ran the solution and it did not show the alert. I hit F5 in the browser and everything started running as I would expect. But I added this code and it works for me.

Eugene Naydenov · Accepted Answer · 2012-08-15 11:11:57Z

The value of src attribute is a full path and not relative, even if you're setting it relative. So change it in this way:

function toggleSearch() {
    var style = document.getElementById("searchPopDown").style;
    var img = document.getElementById("xxxx");
    //console.log(img.src); /* will show you the full path to image source */
    style.display = (style.display != "none") ? "none" : "block";
    img.src = (img.src.indexOf("images/expand.png") < 0 )
        ? "images/expand.png"
        : "images/collapse.png";
}

Another solution is:

style.display = (style.display != "none") ? "none" : "block";
// Sure it's better to initialize this variable once - 
// somewhere outside the click handler:
var state = {
    'none': 'images/expand.png',
    'block': 'images/collapse.png'
}
img.src = state[style.display];

Collectives™ on Stack Overflow

HTML Javascript getElementById for <img> image returns null

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related