如何在输入值大于1时显示隐藏的CSS DIV元素

步骤1：设置DIV的初始隐藏样式 #

假设你要控制的DIV的ID为hidden-div，先通过CSS默认隐藏它：

#hidden-div {
  display: none;
}

步骤2：添加JavaScript逻辑监听输入框变化 #

你可以选择两种方式实现，根据需求选其一：

方式一：扩展原有onchange事件

修改输入框的onchange属性，新增自定义函数调用：

<input type="text" class="NetscapeFix CalTicketQuantity form-control" name="tix_quantity" id="tix_quantity_1842" value="0" size="4" maxlength="4" onchange="calculate(this.form); checkQuantity(this);">

然后添加对应的判断函数：

function checkQuantity(input) {
  const targetDiv = document.getElementById('hidden-div');
  const inputValue = parseInt(input.value, 10);
  
  // 校验输入为有效数字且大于1时显示DIV，否则隐藏
  if (!isNaN(inputValue) && inputValue > 1) {
    targetDiv.style.display = 'block';
  } else {
    targetDiv.style.display = 'none';
  }
}

方式二：通过事件监听器实现（不修改原有HTML）

如果不想改动原有输入框的代码，用addEventListener绑定事件：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const quantityInput = document.getElementById('tix_quantity_1842');
  const targetDiv = document.getElementById('hidden-div');

  function toggleDiv() {
    const inputValue = parseInt(quantityInput.value, 10);
    targetDiv.style.display = (!isNaN(inputValue) && inputValue > 1) ? 'block' : 'none';
  }

  // 监听输入框的change事件（失焦时触发）
  quantityInput.addEventListener('change', toggleDiv);
  // 可选：监听input事件（实时响应输入，比如用户打字过程中就触发）
  quantityInput.addEventListener('input', toggleDiv);
});

注意事项 #

• 将代码中的hidden-div替换为你实际要控制的DIV的ID
• 如果你的DIV是用visibility: hidden或opacity: 0隐藏的，需要对应修改style属性（比如targetDiv.style.visibility = 'visible'）
• 通过parseInt和isNaN处理非数字输入，避免逻辑出错

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