The following code allows users to enter multiple optional quantity fields after first filling in a value of the current quantity input. If the input field contains a value it will then display the next quantity field, if not, it will remove/not display it.
The code is currently working as intended but I don't believe that it follows the DRY principle very well. Is there a way to make this more succinct?
function quantityCheck() {
var q1 = document.getElementById("Quantity1Value").value;
if (q1 !== "") {
document.getElementById("Quantity2").style.display = "";
} else {
document.getElementById("Quantity2").style.display = "none";
}
var q2 = document.getElementById("Quantity2Value").value;
if (q2 !== "") {
document.getElementById("Quantity3").style.display = "";
} else {
document.getElementById("Quantity3").style.display = "none";
}
var q3 = document.getElementById("Quantity3Value").value;
if (q3 !== "") {
document.getElementById("Quantity4").style.display = "";
} else {
document.getElementById("Quantity4").style.display = "none";
}
}
<div>
<span>Quantity 1</span>
<input type="number" id="Quantity1Value" oninput="quantityCheck()" required>
</div>
<div id="Quantity2" style="display:none">
<span>Quantity 2</span>
<input type="number" id="Quantity2Value" oninput="quantityCheck()">
</div>
<div id="Quantity3" style="display:none">
<span>Quantity 3</span>
<input type="number" id="Quantity3Value" oninput="quantityCheck()">
</div>
<div id="Quantity4" style="display:none">
<span>Quantity 4</span>
<input type="number" id="Quantity4Value">
</div>