如何根据指定ID输入框的数值变化控制对应DIV的显示与隐藏？

架构老林

2026-10-9

enter image description here

实现方案

你可以通过以下两种方案实现需求，二选一即可：

方案1：修改现有`calculate`函数

你的输入框已经绑定了onchange="calculate(this.form)"事件，直接在该函数内部添加如下逻辑即可：

// 读取输入框数值转整数，非法值默认按0处理
const attendeeNum = parseInt(document.getElementById('tix_quantity2').value, 10) || 0;
// getElementById不需要加#前缀
const infoArea = document.getElementById('lo-EventPreferenceTitle');

if (attendeeNum >= 1) {
  // 如果区块默认显示属性不是block，替换为对应值即可，比如flex、inline-block
  infoArea.style.display = 'block';
} else {
  infoArea.style.display = 'none';
}

方案2：单独绑定事件监听（无需改动原有calculate函数）

直接在页面任意位置添加如下JS代码即可，页面加载时会自动初始化显示状态，同时支持输入实时响应：

document.addEventListener('DOMContentLoaded', function() {
  const quantityInput = document.getElementById('tix_quantity2');
  const infoBlock = document.getElementById('lo-EventPreferenceTitle');

  function updateDisplay() {
    const count = parseInt(quantityInput.value, 10) || 0;
    infoBlock.style.display = count >= 1 ? 'block' : 'none';
  }

  // 初始化页面加载时的显示状态
  updateDisplay();
  // 输入框失焦时触发
  quantityInput.addEventListener('change', updateDisplay);
  // 输入时实时触发，不需要实时效果可以删除这行
  quantityInput.addEventListener('input', updateDisplay);
});