Revisions to Dynamically add/remove fields on input

edited body

Source Link

edited Aug 15, 2019 at 12:32

22.4k
6
34
70

It would be better to do your evaluation only for the particular elements that could be effectedaffected each time rather than to reevaluate all of them on any change in any input.

We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:

function quantityCheck(eventElement, quantity) {
    //try to use const or let instead of var. 
    //by passing 'this', we now have the target element that triggered the event,
    //so we only need to grab the one we want to change.
    const quantToChange = document.getElementById(quantity);

    //we can also use a tertiary function to make our change to shorten things a bit.
    quantToChange.style.display = eventElement.value.length ? '' : 'none';
}

 <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

It would be better to do your evaluation only for the particular elements that could be effected each time rather than to reevaluate all of them on any change in any input.

We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:

function quantityCheck(eventElement, quantity) {
    //try to use const or let instead of var. 
    //by passing 'this', we now have the target element that triggered the event,
    //so we only need to grab the one we want to change.
    const quantToChange = document.getElementById(quantity);

    //we can also use a tertiary function to make our change to shorten things a bit.
    quantToChange.style.display = eventElement.value.length ? '' : 'none';
}

 <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

It would be better to do your evaluation only for the particular elements that could be affected each time rather than to reevaluate all of them on any change in any input.

We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:

function quantityCheck(eventElement, quantity) {
    //try to use const or let instead of var. 
    //by passing 'this', we now have the target element that triggered the event,
    //so we only need to grab the one we want to change.
    const quantToChange = document.getElementById(quantity);

    //we can also use a tertiary function to make our change to shorten things a bit.
    quantToChange.style.display = eventElement.value.length ? '' : 'none';
}

 <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

clarified explanation, removed unnecessary trim

Source Link

edited Aug 13, 2019 at 18:08

stjns

156
2

It would be better to do ityour evaluation only for the particular element in questionelements that could be effected each time rather than to reevaluate all of them on any change in any input.

We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:

 function quantityCheck(eventElement, quantity) {
    //try to use const or let instead of var. 
    //by passing 'this', we now have the target element that triggered the event,
    //so we only need to grab the one we want to change.
    const quantToChange = document.getElementById(quantity);

    //we can also use a tertiary function to make our change to shorten things a bit.
    quantToChange.style.display = 
        eventElement.value.trim().length ? '' : 'none';
}

    <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

It would be better to do it only for the particular element in question each time rather than to reevaluate all of them. We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:

 function quantityCheck(eventElement, quantity) {
    //try to use const or let instead of var. 
    //by passing 'this', we now have the target element that triggered the event,
    //so we only need to grab the one we want to change.
    const quantToChange = document.getElementById(quantity);

    //we can also use a tertiary function to make our change to shorten things a bit.
    quantToChange.style.display = 
        eventElement.value.trim().length ? '' : 'none';
}

    <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

It would be better to do your evaluation only for the particular elements that could be effected each time rather than to reevaluate all of them on any change in any input.

We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:

function quantityCheck(eventElement, quantity) {
    //try to use const or let instead of var. 
    //by passing 'this', we now have the target element that triggered the event,
    //so we only need to grab the one we want to change.
    const quantToChange = document.getElementById(quantity);

    //we can also use a tertiary function to make our change to shorten things a bit.
    quantToChange.style.display = eventElement.value.length ? '' : 'none';
}

 <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

Source Link

answered Aug 13, 2019 at 17:53

stjns

156
2

It would be better to do it only for the particular element in question each time rather than to reevaluate all of them. We can rewrite this to pass along the element that triggered the event and the ID of the element that we want to update the style on. Take a look at this:

 function quantityCheck(eventElement, quantity) {
    //try to use const or let instead of var. 
    //by passing 'this', we now have the target element that triggered the event,
    //so we only need to grab the one we want to change.
    const quantToChange = document.getElementById(quantity);

    //we can also use a tertiary function to make our change to shorten things a bit.
    quantToChange.style.display = 
        eventElement.value.trim().length ? '' : 'none';
}

    <div>
    <span>Quantity 1</span>
    <input type="number" id="Quantity1Value" oninput="quantityCheck(this, 'Quantity2')" required>
</div>

<div id="Quantity2" style="display:none">
    <span>Quantity 2</span>
    <input type="number" id="Quantity2Value" oninput="quantityCheck(this, 'Quantity3')">
</div>

<div id="Quantity3" style="display:none">
    <span>Quantity 3</span>
    <input type="number" id="Quantity3Value" oninput="quantityCheck(this, 'Quantity4')">
</div>

<div id="Quantity4" style="display:none">
    <span>Quantity 4</span>
    <input type="number" id="Quantity4Value">
</div>

Stack Exchange Network

Return to Answer