How can I add multiple inputs to this <div> using javascript function?

Question

For context, this is a Django based application I am developing. I am using this script within an HTML document. When a button is pressed, it runs the following function. The purpose is to create a element, and then include a couple of inputs and so forth. The problem that I am having is that when I add one input to the div using the following append statements, if I try to add ANOTHER input type (checkbox for example) it over rides the first input (search). How can I append multiple inputs within the script? I will need a total of 3 different inputs.

    var counter = 1; //limits amount of transactions
    function addElements() {
        if (counter < 5) //only allows 4 additional transactions
        {
            let div = document.createElement('div');
            div.id = 'row' + counter;
            document.body.appendChild(div);

            let input = document.createElement('input');
            input.id='search'+counter;
            input.type = 'search';
            input.placeholder = 'Search by product name'
            div.appendChild(input);

            let button = document.createElement('button');
            button.id ='button'+counter;
            button.type = 'QRscan';
            button.innerText = 'QR scan'
            div.appendChild(button);
        }

        counter++
        if (counter >= 6) {
            alert("You have reached the maximum transactions.")
        }
    }
    
    addElements();

Where is the code that adds an input of type other than search? — Dostrelith
– Dostrelith, Commented Jun 17, 2020 at 19:11
This code works fine, so the problem must be in the function for adding other inputs. — imvain2
– imvain2, Commented Jun 17, 2020 at 19:15
Hey @Austin Hallett I tried running your code inside the console of browser and it runs properly. I feel the part where you are triggering the function has some issues. The code in itself does add an input field and a button to the body as you have written. — Amitav Roy
– Amitav Roy, Commented Jun 17, 2020 at 19:22

Dostrelith · Accepted Answer · 2020-06-17 19:14:16Z

If I understood correctly, you just want to append another input to the div. In that case you can just add another input with a different variable name (input1 here) and append it to the div.

var counter = 1; //limits amount of transactions
function addElements() {
    if (counter < 5) //only allows 4 additional transactions
    {
        let div = document.createElement('div');
        div.id = 'row' + counter;
        document.body.appendChild(div);

        let input = document.createElement('input');
        input.id='search'+counter;
        input.type = 'search';
        input.placeholder = 'Search by product name'
        div.appendChild(input);
        
        let input1 = document.createElement('input');
        input.id='checkbox'+counter;
        input.type = 'checkbox';
        div.appendChild(input1);
				
        let button = document.createElement('button');
        button.id ='button'+counter;
        button.type = 'QRscan';
        button.innerText = 'QR scan'
        div.appendChild(button);
    }

    counter++
    if (counter >= 6) {
        alert("You have reached the maximum transactions.")
    }
}

<button onclick="addElements()">
Click me
</button>

Collectives™ on Stack Overflow

How can I add multiple inputs to this <div> using javascript function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related