Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 3843
Home > Forums > JavaScript >

Please let me know what is the error [Resolved]

Posted by Nkkppp under JavaScript on 9/28/2012 | Points: 10 | Views : 2057 | Status : [Member] | Replies : 10
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
I am trying to hide Image on button click but its not working.Please let me know what is the error


<script  type="text/javascript">
        function Image() {

            var img = document.getElementById('<%=img.ClientID %>');
            img.Visible = false;

                    }
      
    </script>

<body>
    <form id="form1" runat="server">
    <div>
    <div> 
    <asp:Image ID="img" runat="server" ImageUrl="~/p.jpg" />
    <asp:Button ID="btn" Text="Click to Hide Image" runat="server" OnClientClick="Image()" />
    
    </div>
    
    </div>
    </form>
</body>




Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Samirg on: 9/28/2012 [Member] Starter | Points: 50

Up
0
Down

Resolved
This small modification should get the things working... 

function out() { 

document.getElementById('<%=img.ClientID %>').src = 'spinning-wheel.gif'; 

return false;

 }

</script> 

</head> 

<body> 

 <form id="form1" runat="server"> 

 <div> 

 <div> 

 <asp:Image AlternateText="aaa" ID="img" Visible="true" runat="server" ImageUrl="~/p.jpg" /> 

 <asp:Button ID="btn" runat="server" OnClientClick="return out()" Text="Click to Change"/>


Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Nkkppp on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
The below code is also not working to change image on button click

function out() {


document.getElementById('<%=img.ClientID %>').src = 'spinning-wheel.gif';

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:Image AlternateText="aaa" ID="img" Visible="true" runat="server" ImageUrl="~/p.jpg" />
<asp:Button ID="btn" runat="server" OnClientClick="out()" Text="Click to Change"/>



Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Hariinakoti on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
we can do in jquery image hiding.u can try in jquery.
do u want in jquery code?

Thanks & Regards
Hari

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Nkkppp on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
No thank you.

I am trying to learn javascript and jquery.

So trying to do the same with both.

It worked with jquery but javascript code failed, i dont know for what reason.

Tried to change the image using onmouseover and onmouseout using Javascript it worked but not with button click.

So please help me with javascript

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Jayakumars on: 9/28/2012 [Member] [MVP] Bronze | Points: 25

Up
0
Down
hi
try this working fine in my pc 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript" language="javascript">

        function HideImg() {

            document.getElementById("div1").style.visibility="hidden";return false;

        }

</script>



</head>

<body>

    <form id="form1" runat="server">

   <div id="div1" runat="server" >

   <asp:Image ID="img1" runat="server" ImageUrl="~/images/elevation.jpg" Width="30" Height="30" />

   </div>



    <asp:Button ID="bt1" runat="server" Text ="Click" OnClientClick="return HideImg();" />





    </form>

</body>

</html>



Mark as Answer if its helpful to you

Kumaraspcode2009@gmail.com

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Jayakumars on: 9/28/2012 [Member] [MVP] Bronze | Points: 25

Up
0
Down
Please mark as answer if it helpful to you.


Mark as Answer if its helpful to you

Kumaraspcode2009@gmail.com

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Nkkppp on: 9/29/2012 [Member] Starter | Points: 25

Up
0
Down
Hi Samir,

The small modification worked fine.

So can u please let me know what is the importance of return false; statement in the function.

and also in the OnClientClick the importance of return.

Thank you.

Prathap.

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Nkkppp on: 9/29/2012 [Member] Starter | Points: 25

Up
0
Down
Hi Jayakumar,

Without using the div element cant we access the Image id and set its Visible property.

Regards,
Prathap.

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Jayakumars on: 9/29/2012 [Member] [MVP] Bronze | Points: 25

Up
0
Down
hi
NKKPPP

try this code 

document.getElementById("img1").style.visibility = "hidden"; return false;



Mark as Answer if its helpful to you

Kumaraspcode2009@gmail.com

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Samirg on: 9/29/2012 [Member] Starter | Points: 25

Up
0
Down
Hi Nkkppp,

When user clicks the button, the JavaScript code fires(which occurs at client side), but at the same time the page is posted back (which occurs at server side). So the page life cycle is followed and the the changes made by the JavaScript code are overwritten by the server side copy. The return false stmt prevents the page postback, so now u can view the changes made by the script.

Nkkppp, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts