如何通过JavaScript根据文本框输入的数字显示或隐藏面板？

我帮你梳理下这个问题的几个关键问题点，你的整体思路是对的，但细节上没处理好导致事件没生效：

1. 服务器控件ClientID匹配错误 #

你的divUnitsAffected是带runat="server"的服务器控件，ASP.NET会自动给这类控件生成带命名容器前缀的ClientID，直接写document.getElementById('DivUnitsAffected')大概率找不到元素。而且你代码里服务器控件ID是小写的divUnitsAffected，但JS里写的是大写开头的DivUnitsAffected，大小写不匹配也会导致查找失败。

修复方式：和TextBox一样，用服务器端代码输出正确的ClientID：

var DivUnitsAffected = document.getElementById("<%=divUnitsAffected.ClientID %>");

2. 字符串与数字的比较隐患 #

文本框的value是字符串类型，直接和数字1比较可能出现意外行为（比如输入"02"时字符串比较逻辑会判定它大于1，但如果输入带小数的"1.2"，字符串比较就会出错）。建议先把输入值转换为数字：

// 转换为整数，允许小数的话用parseFloat
var unitValue = parseInt(UnitsAffected.value.trim(), 10);
// 处理非数字输入的情况
if (isNaN(unitValue)) {
  DivUnitsAffected.style.display = "none";
  return;
}

3. 事件选择不够全面 #

onkeyup事件无法覆盖所有输入场景（比如右键粘贴、输入法联想输入），建议改用oninput事件，它能响应所有输入内容变化的情况：

<asp:TextBox ID="txtUnitsAffected" runat="server" Height="25px" Width="256px" oninput="getUnitsAffected();"></asp:TextBox>

另外，要确保JS代码在DOM加载完成后执行，避免页面还没渲染好就查找元素导致失败，可以把初始化逻辑放在window.onload里：

window.onload = function() {
  // 页面加载完成后先执行一次，确保面板初始状态正确
  getUnitsAffected();
};

4. 服务器Visible属性的坑 #

如果你的divUnitsAffected设置了visible="false"，ASP.NET不会把这个元素渲染到页面上，JS自然无法操作它。如果需要初始隐藏面板，建议用CSS的display:none替代服务器端的Visible属性：

<div id="divUnitsAffected" runat="server" style="display:none;">
  <!-- 面板内容 -->
</div>

修改后的完整代码示例 #

ASPX代码 #

<tr>
  <td class="ColWidth">
    <span class="red" style="color: #FF0000; font-weight: bold;"></span>
    <asp:Label ID="lblUnitsAffedted" runat="server" Text="Total number of units affected: "></asp:Label>
  </td>
  <td class="InputCallWidth">
    <asp:TextBox ID="txtUnitsAffected" runat="server" Height="25px" Width="256px" oninput="getUnitsAffected();"></asp:TextBox>
  </td>
</tr>
<tr>
  <td colspan="4">
    <div id="divUnitsAffected" runat="server" style="display:none;">
      <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>

JavaScript代码 #

<script type="text/javascript">
window.onload = function() {
  getUnitsAffected();
};

function getUnitsAffected() {
  // 获取目标控件
  var unitsInput = document.getElementById("<%=txtUnitsAffected.ClientID %>");
  var unitsPanel = document.getElementById("<%=divUnitsAffected.ClientID %>");
  
  // 容错处理：检查元素是否存在
  if (!unitsInput || !unitsPanel) {
    console.error("无法找到目标控件，请检查ID是否正确");
    return;
  }
  
  // 转换输入值为数字并处理
  var inputValue = parseInt(unitsInput.value.trim(), 10);
  if (!isNaN(inputValue) && inputValue > 1) {
    unitsPanel.style.display = "block";
  } else {
    unitsPanel.style.display = "none";
  }
}
</script>

内容的提问来源于stack exchange，提问作者user2116846