Reputation: 5848

HTML Javascript getElementById for <img> image returns null

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

Upvotes: 1

Answers (3)

Eugene Naydenov

Reputation: 7295

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];

Upvotes: 1

Sune Trudslev

Reputation: 974

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");
    }

Upvotes: 1