Problem with javascript getelementbyid

well I have 3 LinkButton

<asp:LinkButton ID="lnkEdit" runat="server" Text="Edit Record" OnClientClick='ControlVisible();'/>
<asp:LinkButton ID="lnkSave" runat="server" Text="Save" Visible="false" />
<asp:LinkButton ID="lnkCancel" runat="server" Text="Cancel" Visible="false"  />

when I'll click to lnkEdit button lnkSave and lnkCancel buttons must unvisible

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

    function ControlVisible() {


        var Edit = document.getElementById("lnkEdit"); 
        var Save = document.getElementById("lnkSave");
        var Cancel = document.getElementById("lnkCancel");

        Edit.visible = false;
        Save.visible = true;
        Cancel.visible = true;

    }

</script>

But when I'll cLick Edit LinkButton : var Edit = document.getElementById(开发者_运维技巧"lnkEdit"); here comes Null, can not retrive Control's ID

what the proble?

You have to use another alternative:

var Edit = document.getElementById("<%= lnkEdit.ClientID %>"); 
var Save = document.getElementById("<%= lnkSave.ClientID %>");
var Cancel = document.getElementById("<%= lnkCancel.ClientID %>");

You can also use the ASP.NET AJAX $get method, which is a shortcut for document.getElementById.

When you set Visible false on web control, it means that it never reach the browser. As far as the browser knows, those controls don't exist.

So first make them hidden using CSS instead by changing Visible="false" to style="display: none;" - the effect will be the same.

Next, change the code to this, as others also suggested:

var oEdit = document.getElementById("<%=lnkEdit.ClientId%>"); 
var oSave = document.getElementById("<%=lnkSave.ClientId%>");
var oCancel = document.getElementById("<%=lnkCancel.ClientId%>");
oEdit.style.display = "";
oSave.style.display = "";
oCancel.style.display = "";

ASP.NET will generate its own HTML ids. If you want to force your own custom IDs to be generated, you can specify the ID using the "clientID" attribute:

<asp:LinkButton ID="lnkEdit" clientID="lnkEdit" runat="server" Text="Edit Record" OnClientClick='ControlVisible();'/>

ASP .NET automatically includes the IDs of the parent elements when generating an ID for an element. The generated HTML will have IDs following this kind of format: ctl00$MainContent$txtSymbol. So, the default DOM function getElementById won't find an element if you only use the last ID.

Source Element:

<asp:TextBox runat="server" ID="txtSymbol">

HTML generated:

<input type="text" id="ctl00_MainContent_txtSymbol" name="ctl00$MainContent$txtSymbol">

You can create a helper jQuery function which takes care of this. The next function created by Rick Strahl does the job:

function $$(id, context) {  
    var el = $("#" + id, context);  
    if (el.length < 1) {  
        el = $("[id$=_" + id + "]", context);
    }
    return el;  
}

You can use it like this to find your element:

$$("txtSymbol")

Are You sure it's about his line:

var Edit = document.getElementById("lnkEdit"); 

and not about this one:

Edit.visible = false;

Not sure which browser accepts visible property directly on HTML element, but try to use this instead:

Edit.style.visibility = 'hidden';

or

Edit.style.display = 'none';

If the controls are inside a container, the id of the container will be prepended to the if of the conbtrol to create a client id that is unique.

You can use the ClientID property to find out the generated id:

var Edit = document.getElementById("<%=lnkEdit.ClientId%>"); 
var Save = document.getElementById("<%=lnkSave.ClientId%>");
var Cancel = document.getElementById("<%=lnkCancel.ClientId%>");