java script is not working in content page

Question

By clicking image "imgAdd", I want to set visibility of div "divAddCustomerInfo" to true by using JavaScript. But click on image isn't working. I think that is because JavaScript isn't working. Anyone can help? Yhanks in advance.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 <script type="text/javascript">
    function imgAdd_click() {
        document.getElementById("divAddCustomerInfo").style.visibility = 'visible';
    }
</script>
<div id="divCustomerBody" style="margin-left:300px; margin-top:50px;">
    <h1>Customer</h1>
    <hr style="color:gray; width:900px; margin-left: 0px;" />
    <br />
    <div id="divOperationSymbol" style="height:100px; width:900px; ">

        <div id="divAddition" onclick="divAddition_click()" style="height:100px; float:left; width:300px; " >
            <img id="imgAdd" onclick="imgAdd_click()" src="001446-3d-transparent-glass-icon-media-a-media35-add.png" style="height:70px; width:70px; display:block; margin-left:auto; margin-right:auto;" />
            <label id="lblAdd" onclick="lblADD_click()" style="color: #a6a6a6; margin-left:100px;">Add Customer</label>
        </div>

    </div>
</div>
    <div id="divAddCustomerInfo" style="visibility: hidden; margin-left:300px; margin-top:50px;">

</div>

Add parentheses `()` to your `onclick`. It should be like this `onclick=imgAdd_click()` — Prateek Gupta, Sep 08 '16 at 06:49
@waqarahmedsomra `visible="false"` isn't a valid html attribute. Change it to `style="visibility:hidden"` — Prateek Gupta, Sep 08 '16 at 07:00
@waqarahmedsomra Check in browser developer tools, whether that element is rendered at server or not. — Prateek Gupta, Sep 08 '16 at 07:06
@PrateekGupta div "divAddCustomerInfo" is no more runat server. i have changed it. its now a just a html div — waqar ahmed somra, Sep 08 '16 at 07:14
Your question and examples are not clear. What "isn't working" exactly? Please create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). This question seems to of turned into a guessing game — Liam, Sep 08 '16 at 07:17
Thanku everyone. its solved. in div "divAddCustomerInfo" i have a table and it was set to visible. my mistake. m so sorry. thanks again — waqar ahmed somra, Sep 08 '16 at 07:19

score 1 · Answer 1 · answered Sep 08 '16 at 06:55

1

Change the following

<div id="divAddCustomerInfo" runat="server" visible="false" style="margin-left:300px; margin-top:50px;">

Into

<div id="divAddCustomerInfo" runat="server" style="visibility:hidden;margin-left:300px; margin-top:50px;">

answered Sep 08 '16 at 06:55

Maths RkBala

2,207
3
18
21

"divAddCustomerInfo" is visible even before click on image – waqar ahmed somra Sep 08 '16 at 07:02

score 0 · Answer 2 · answered Sep 08 '16 at 06:53

0

Update the following portion as

<div id="divAddition" onclick="divAddition_click()" style="height:100px; float:left; width:300px; " >
            <img id="imgAdd" onclick="imgAdd_click()" src="001446-3d-transparent-glass-icon-media-a-media35-add.png" style="height:70px; width:70px; display:block; margin-left:auto; margin-right:auto;" />
            <label id="lblAdd" onclick="lblADD_click()" style="color: #a6a6a6; margin-left:100px;">Add Customer</label>
        </div>

answered Sep 08 '16 at 06:53

Sasikumar

863
5
9

thankyou. click on image does alert a message. but div "divAddCustomerInfo" is visible even before click on image. any suggestion? – waqar ahmed somra Sep 08 '16 at 07:10

Kas Elvirov · Answer 3 · 2016-09-09T06:53:30.497

It is working version of your code (see below): Your mistakes:

the absence of brackets in onclick
the absence visibility: hidden; in div id="divAddCustomerInfo"

<div id="divCustomerBody" style="margin-left:300px; margin-top:50px;">
    <h1>Customer</h1>
    <hr style="color:gray; width:900px; margin-left: 0px;" />
    <br />
    <div id="divOperationSymbol" style="height:100px; width:900px; ">

        <div id="divAddition" onclick="divAddition_click()" style="height:100px; float:left; width:300px; " >
            <img id="imgAdd" onclick="imgAdd_click()" src="http://www.ipac.caltech.edu/2mass/gallery/antennae.jpg" style="height:70px; width:70px; display:block; margin-left:auto; margin-right:auto;" />
            <label id="lblAdd" onclick="lblADD_click()" style="color: #a6a6a6; margin-left:100px;">Add Customer</label>
        </div>

    </div>
</div>
<div id="divAddCustomerInfo" runat="server"   style="margin-left:300px; margin-top:50px; visibility:hidden">
    Text
</div>

function imgAdd_click() {
    document.getElementById("divAddCustomerInfo").style.visibility = 'visible';
}

I'm not clear how simply cutting and pasting the OPs question back as an answer and saying "It works as you want" helps anyone? — Liam, Sep 08 '16 at 07:14

java script is not working in content page

3 Answers3