如何使用JavaScript根据文本框显示或隐藏面板？

Question

I have a text box in which user enters a number. I want to show a new panel when user enters a value bigger than 1 in the text box but hide it when the number is 1. I'm using Onkeyup function in javascript and also tried onblur it doesn't work.

This is the part that I get the value.

<tr>
    <td class="ColWidth">
        <span class="red" style="color: #FF0000; font-weight: bold;"></span>
        <asp:Label ID="lblUnitsAffedted" runat="server" 
             Text="Total number of untis affected: ">
        </asp:Label>
    </td>
    <td class="InputCallWidth">
        <asp:TextBox ID="txtUnitsAffected" runat="server" Height="25px" Width="256px" 
              onkeyup="getUnitsAffected();">
        </asp:TextBox>           
    </td>
</tr>

This is the part where I want to display when number of units is larger than 1:

<tr>
    <td colspan="4">
        <div id="divUnitsAffected" runat="server" visible="true">
            <table width="100%" border="0" cellspacing="0" class="tbl">
                <tr>
                    <td colspan="3" style="color:black;">
                        <h4>
                            please provide Names & Unit numbers
                        </h4>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

And here is my Java Script method.

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

     function getUnitsAffected() {
         //Get the Textbox control
         var UnitsAffected = document.getElementById("<%=txtUnitsAffected.ClientID %>");
         var DivUnitsAffected = document.getElementById('DivUnitsAffected');

         if (UnitsAffected.value > 1){
             DivUnitsAffected.style.display = "block";
         }
         else {
             DivUnitsAffected.style.display = "none";
         }
     }
</script>

Answer 1

Instead of onKeyUp event use the onblur or focusout event. Then you can fetch & check the value of your input control and based on the value you will be able set the panel visibility.

Further, you can use parseFloat() JavaScript function to get the decimal form of the value being entered and then check for the condition, whether it is less than or equal to 1 OR greater than 1.

Answer 2

Try the below codes

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

  <table>
   <tbody>
       <tr>
           <td>
               <asp:TextBox ID="txtUnitsAffected" runat="server" Height="25px" Width="256px" 
          onblur="getUnitsAffected(this);">
    </asp:TextBox>
           </td>
       </tr>
       <tr>
           <td>
               <div id="divUnitsAffected">
                   Testing
               </div>
           </td>
       </tr>
   </tbody>
</table>

   <script type="text/javascript">
       function getUnitsAffected(txtbx)
       {
           var num = parseInt(txtbx.value);
           var div = document.getElementById('divUnitsAffected');

           if(num > 1)
           {
               div.style.display = "block";
           }
           else
           {
               div.style.display = "none";
           }
       }
   </script>
</asp:Content>