How to make automatic input line appender in js?

Question

I'm having an HTML page with an input line and a submit button. I'm wanting to automatically generate a new line under the line if we change the first line content.

Before searching for this, I just made a second button named "Add new line" (explicit).

HTML part
print '<input type="button" id="addLineButton" value="Ajouter ligne"/>';
print '<input type="submit" id="valider" value="Rechercher"/>';



JS part
    $("#addLineButton").click(function(e){
        e.preventDefault();            
        var newLine = "";
        document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
        var nbLines = Number(document.getElementById("nbLines").textContent);

        newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"

        $("#zoneOF").append(newLine);

    });

$("#zoneOF") is a div, and nbLines is a label which is used to count how many lines we already have.

I'm then searching (but not founding because I don't know how to formulate it clearly) what can I do to remove my addLineButton and automate the line adding (surely with on change event).

I wouldn't be surprised if you didn't understood sthg, then don't hesitate to ask me to reformulate. Thank you in advance.

_"surely with on change event"_ - Have you tried something with events yet? — Andreas, Oct 09 '19 at 14:54
No, just knowing that this event would be the one who can help me. Also, I think that, with on change event, if I type 3 characters in my input, it would create 3 new lines. Then I'm a bit lost :/ — acropose-corentin, Oct 09 '19 at 15:01
The `change` event is not triggered on every key press: [HTMLElement: change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) ([fr](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event)) — Andreas, Oct 09 '19 at 15:03
Oh, wasn't expecting that. I made a recursive function and that's working. Going to post it as resolving answer. Thanks ! — acropose-corentin, Oct 09 '19 at 15:08

score 0 · Accepted Answer · answered Oct 09 '19 at 15:12

Ok I resolved it, by simply making my code recursive.

$(document).ready(function(){
            var newLine = "";
            document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
            var nbLines = Number(document.getElementById("nbLines").textContent);

            newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"

            $("#zoneOF").append(newLine);
                
            $('#line'+nbLines).on('change', function() {
                setNewLine();
            });



            function setNewLine() {
                var newLine = "";
                document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
                var nbLines = Number(document.getElementById("nbLines").textContent);

                newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"

                $("#zoneOF").append(newLine);
                $('#line'+nbLines).on('change', function() {
                    setNewLine();
                });
            }

I make a new line at the document creation, and I put the on change event on it. The on change calls a function which creates a new line, and the function calls herself when the on change event is triggered on the new line.

You might want to have a look at Event Delegation: [javascript - What is DOM Event delegation? - Stack Overflow](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) / [Understanding Event Delegation | jQuery Learning Center](https://learn.jquery.com/events/event-delegation/) — Andreas, Oct 09 '19 at 15:17

How to make automatic input line appender in js?

1 Answers1