javascript error when trying to use getElementById: 'null' is null or not an object?

I thought this was pretty simple. I have an ASP:Image named img_load. I have a javascript set up to run onclick. All I want to do is set the visibility to true. Simple right? But I'm getting a 'null' is null or not an object error when trying to do anything with my javascript object.  The image is in an update panel. Does that make a difference? Is that what's causing my error?
<script type="text/javascript">
        function show_wait()
        {
            var img;
            img = document.getElementById("img_load");
            img.visible = true;   
        }
    </script>

Open in new window

LVL 1
ohmErnieAsked:
Who is Participating?
 
burakiewiczConnect With a Mentor Commented:
if you set it to visible=false in the code behind it is never output in the html,
if you add the style attribute  img.Style.Add("visibilty", "hidden");
it will be output to the page so you can access it
0
 
raterusCommented:
Look at the source of the page as the browser sees it, find the image and use the ID it has.  My guess is it's been rewritten by asp.net.

To get this "renamed" id on the server, you need to use the ClientID function of the control.  I've used this in the past to easily make the switch.

<script type="text/javascript">
        function show_wait()
        {
            var img;
            img = document.getElementById('<%= img_load.ClientID %>');
            img.visible = true;  
        }
    </script>
0
 
ohmErnieAuthor Commented:
Well, when I look at the source code, I don't even see my image. Is that because I set it invisible in ASP?
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
Ali KayahanFull Stack DeveloperCommented:
<script type="text/javascript">
        function show_wait()
        {
            var img;
            img = document.getElementById("img_load");
            img.style.display = 'block';  
        }
    </script>
0
 
burakiewiczCommented:
should be
("visibility", "hidden");
0
 
raterusCommented:
Yeah, if you set Visible=false on the server control, it won't even be rendered.  What you need to do is set CSS to hide the image, but the HTML will remain.

The CSS attribute to use is display:none or display:block
0
 
ruscompCommented:
It may also not be shown if you are using update panels... AJAX loaded html won't show in the source...
0
 
ohmErnieAuthor Commented:
That worked great. All I had to do was change my javascript to set the visibility back to "visible".
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.