I have two javascript functions to change background color on enter and leave events.

    function ColoronEnter()
      { 
        var txt1 = document.getElementById("<%=txtID1.ClientID%>");
       txt1.style.backgroundColor = "red";
      }

      function ColoronLeave()
      { 
        var txt2 = document.getElementById("<%=txtID1.ClientID%>");
       txt2.style.backgroundColor = "";
      }

I am calling them as

<asp:TextBox ID="txtID1" runat="server" MaxLength="20" AutoCompleteType="FirstName"  onfocus="ColoronEnter()" onblur="ColoronLeave()" ></asp:TextBox>

It is working well. But I want to apply one javascript function to all my textboxes. I have tried something like

        function onEnter(_input)
       {
        var input = _input;
        document.getElementById(input).style.backgroundColor ="yellow"; 
       }  
       function onLeave(_input)
       {
        var input = _input;
        document.getElementById(input).style.backgroundColor =""; 
       }  

trying to call them as

 <asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(txtID2)" onblur="onLeave(txtID2)"></asp:TextBox>
 <asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(txtID3)" onblur="onLeave(txtID3)"></asp:TextBox>

It is throwing an error as

Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined.

How can I call one function to all my textboxes. Thank in advance.

I have two javascript functions to change background color on enter and leave events.

    function ColoronEnter()
      { 
        var txt1 = document.getElementById("<%=txtID1.ClientID%>");
       txt1.style.backgroundColor = "red";
      }

      function ColoronLeave()
      { 
        var txt2 = document.getElementById("<%=txtID1.ClientID%>");
       txt2.style.backgroundColor = "";
      }

I am calling them as

<asp:TextBox ID="txtID1" runat="server" MaxLength="20" AutoCompleteType="FirstName"  onfocus="ColoronEnter()" onblur="ColoronLeave()" ></asp:TextBox>

It is working well. But I want to apply one javascript function to all my textboxes. I have tried something like

        function onEnter(_input)
       {
        var input = _input;
        document.getElementById(input).style.backgroundColor ="yellow"; 
       }  
       function onLeave(_input)
       {
        var input = _input;
        document.getElementById(input).style.backgroundColor =""; 
       }  

trying to call them as

 <asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(txtID2)" onblur="onLeave(txtID2)"></asp:TextBox>
 <asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(txtID3)" onblur="onLeave(txtID3)"></asp:TextBox>

It is throwing an error as

Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined.

How can I call one function to all my textboxes. Thank in advance.

• javascript
• asp
• background-color

• you can use this keyword instead of txtID2 and txtID3 or enclose your control's Ids in single quotation mark like onfocus="onEnter('txtID2')". – Code Rider Commented Mar 27, 2013 at 8:03

1 Answer 1

Use like

  <asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>
  <asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>


    function onEnter(_input)
   {
     _input.style.backgroundColor ="yellow"; 
   }  
   function onLeave(_input)
   {
     _input.style.backgroundColor =""; 
   } 

If you don't have any restrictions to use jQuery, use jQuery hover event to handle this.