显示/隐藏基于输入变化的div

Question

我希望能够根据输入的变化显示/隐藏div。我需要大于0的值来显示div，如果是0div就会被隐藏。下面是我得到的输入的当前HTML，默认值为0。我需要额外的信息Div默认值为0，只显示大于0的值。你能帮我提供一个具体到我下面提供的代码的例子吗?

<input type="text" class="NetscapeFix CalTicketQuantity form-control" name="tix_quantity" id="tix_quantity2" value="0" size="4" maxlength="4" onchange="calculate(this.form);">
<div class="additionaInfo">Div content will go here</div>

Answer 1

当您使用数字值时，您的输入可能应该是number类型。

// Your listen for value changes in your input
document.querySelector('#your-input').addEventListener('change', function calculate(e) {
const div = document.querySelector('#div-to-show-hide');
// Your grab the input value and test your condition
if (Number(e.target.value) > 0)
div.style.display = 'block';
else
div.style.display = 'none';
});

<input type="number" id="your-input" class="NetscapeFix CalTicketQuantity form-control" name="tix_quantity" id="tix_quantity2" value="0" size="4" maxlength="4">
<div id="div-to-show-hide" class="additionaInfo" style="display:none;">Div content will go here</div>