Making a control visible/ hide in javascript

i have 2 html tables having as id tb1 & tb2

i hve 2 asp command buttons on clientclick i want to make it visible & display none

i have

function tbl()
{
document.getElementById(‘<%=tbl1.ClientID%>’).style.display = ‘block’;
document.getElementById(‘<%=tbl2.ClientID%>’).style.display = ‘none’;

}

called on button1 client click as

cmd.Attributes.Add(“onclick”, “javascript:tbl()”);

but getting error

The name ‘tbl1’ does not exist in the current context


<table width="100%" cellpadding="0" cellspacing="0" id="tbl1">
<tr>
<td > one</td></tr></table>

<table width="100%" cellpadding="0" cellspacing="0" id="tbl2">
<tr>
<td >two</td></tr></table>

The error means that there’s no object in asp called tbl1
You want to keep your Javascript completely separate to your ASP anyway.

function toggleTables() {
  document.getElementById('tbl1').style.display = 'block';
  document.getElementById('tbl2').style.display = 'none';
}
<a href="#" onclick="toggleTables(); return false;">toggle</a>