Javascript & ASP .NET problem

I'm having some problems with implementing javascript controls in my asp.net page. I would like to have a set of variables get their values based on some asp button controls. Then I manipulate those buttons based on how they are clicked. I'm having some issues though:

1. Any global variables I define and give a value to are coming back as null
2. I can't run a onload event, because all my variables come back as null.
3. I can't use the asp.net tags of visible="false" because then the javascript can't show the control for some reason.
4. the javascript style.visibility="visible" doesn't really work as you can still see where the button would be - it just isn't visible.

So here is my code. The TL,DR is I'd like to run some behavior to conditionally show/hide buttons via js on load, and then hide/show buttons on different button clicks. I know it is a scope issue开发者_开发知识库, as the global variables return "null" when I test them, but I don't know a good workaround for that and the onload issue. Thanks!

var btnEdit = document.getElementById("<%= cmdEdit.ClientID %>");
var btnSave  = document.getElementById("<%= cmdSave.ClientID %>");
var btnCanvel = document.getElementById("<%= cmdCancel.ClientID %>");
var btnConfirm = document.getElementById("<%= cmdConfirm.ClientID %>");


function HideEdit(){

    $(btnEdit).hide();
    $(btnSave).show();
    $(btnCancel).show();
    $(btnConfirm).hide();

    document.getElementById("<%= pnlWhy.ClientID %>").style.visibility = "visible";
    document.getElementById("<%= pnlRequest.ClientID %>").style.visibility = "visible";
}

function testme() {
alert(btnEdit)

}
function loadpage(newwine){

    if (newwine==true){
        $(btnEdit).hide();
        $(btnSave).show();
        $(btnCancel).show();
        }
    else{
        $(btnEdit).show();
    }
$(btnConfirm).hide();
}

It looks like you're using jQuery, though you didn't mention it in the tags. Anyway, what's probably happening is that your code is running before the page elements actually exist. In that case, the global references will be null; in fact they start out null.

If you're using jQuery, just put your code in a "ready" handler:

$(function() {
  // all your code here
});

Why you do not find element via jQuery? It is more convinient. Also you can set or remove style class via jQuery methods .addClass (http://api.jquery.com/addClass/) method. If you Ned in after one click set visibility true and after another click set visibility false use jQuery .toggle jQuery method (http://api.jquery.com/toggle/)