Error using javascript to show div

Question

Using asp.net in VS 2013.

I have the following code.

            <div id="HPInformation">
            <div>
                <div id="HPInfoPopUp" style="display: none;">
                    <div id="HPInfoPopUpTitle">Information</div>
                    <div id="HPInfoPopUpInternalPanel">
                        <table id="HPInfoTable">
                            <tr>
                                <td>Contact</td>
                                <td>Harris Redknapp</td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>harris@nefsa.co.uk</td>
                            </tr>
                            <tr>
                                <td>Telephone</td>
                                <td>0800 888888</td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td>1 Bali Court</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>Middlesbrough</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>TS21 5TT</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <asp:Image ID="informationImg" ImageUrl="~/images/HomeInformation.gif" runat="server" />
            <span>
                <h3>INFORMATION</h3>
            </span>
        </div>

        <script type="text/javascript">
            var e = document.getElementById('HPInformation');
            e.onmouseover = function () {
                document.getElementById('HPInfoPopUp').style.display = 'block';
                document.getElementById('informationImg').style.display = 'none';
            }
            e.onmouseout = function () {
                document.getElementById('HPInfoPopUp').style.display = 'none';
                document.getElementById('informationImg').style.display = 'block';
            }

        </script>

        <script type="text/javascript">
            var e = document.getElementById('HPContact');
            e.onmouseover = function () {
                document.getElementById('HPContactPopUp').style.display = 'block';
                document.getElementById('contactImg').style.display = 'none';
            }
            e.onmouseout = function () {
                document.getElementById('HPContactPopUp').style.display = 'none';
                document.getElementById('contactImg').style.display = 'block';
            }
        </script>

        <div id="HPContact">
            <div>
                <div id="HPContactPopUp" style="display: none;">
                    <div id="HPContactPopUpTitle">Information</div>
                    <div id="HPcontactPopUpInternalPanel">
                        <table id="HPcontactTable">
                            <tr>
                                <td>Contact</td>
                                <td>Harris Redknapp</td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>harris@nefsa.co.uk</td>
                            </tr>
                            <tr>
                                <td>Telephone</td>
                                <td>0800 888888</td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td>1 Bali Court</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>Middlesbrough</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>TS21 5TT</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

This is so when a particular the dic HPInformation or HPContact is moused over a div is shown on the page. The javascript for HP information works fine but the HP contact doesn't and I cant see why. Can anyone help?

Because `HPContact` is not in the DOM at the time you call `document.getElementById('HPContact')` (the `div` with that `id` is after your script). You should get an error like `cannot set property 'onmouseover' of null` — t.niese, Jan 11 '15 at 16:28

score 0 · Answer 1 · answered Jan 11 '15 at 18:18

You should set the ClientIDMode property to "Static" so the name doesn't get changed.

<asp:Image ID="informationImg" ImageUrl="~/images/HomeInformation.gif" 
runat="server" />

Should be

<asp:Image ID="informationImg" ImageUrl="~/images/HomeInformation.gif" 
runat="server" ClientIDMode="Static" />

You could also use:

document.getElementById('<%=informationImg.ClientID %>').style.display = 'block';

You must do this for all ASP.NET Controls that you'll be accessing from the client side, because their ID's inherit their naming containers.

MSDN

Error using javascript to show div

1 Answers1