How do I use getElementById on dynamically created inputs?

Question

I'm having a some trouble getting the state of dynamically created checkboxes. I used the code below to add several checkboxes, with dynamic Id's, to the body.

var html = ...;
for(var i = 0; i < options.checkTextArray.length; i++)
{
    html +=
    `
        <label class="checkbox" [attr.for]="'myCheckboxId' + i">
            <input class="checkbox__input" type="checkbox" [name]="'myCheckboxName' + i" [id]="'myCheckboxId' + i">
            <div class="checkbox__box"></div>${options.checkTextArray[i]}: 
        </label>
        <br>
    `;
}

In another part of the code, I would like to get and/or set the state of the checkboxes but havent succeeded so far. I tried using the code below to achieve my goals, but "document.getElementById(...)" keeps returning "null".

var ckbStateBuffer = new Array();
var txtContenBuffer = new Array();

for(var i = 0; i < options.checkTextArray.length; i++) {
    ckbStateBuffer.push(document.getElementById("'myCheckboxId' + i").checked);
}

As you can see, I'd like to save the checkbox states in an array and use it, to reset the new states to the old ones (for example when a button is pushed).

So how should I be adding the states to this buffer array? What am I doing wrong in the code above? Tried several other things but none of those worked.

Jarred Parr · Accepted Answer · 2019-09-21 17:43:41Z

2

It looks like you just have a simple error in your code. What you're trying to do is something to the affect of:

id=myCheckboxName1
id=myCheckboxName2
id=myCheckboxName3
...

However, your code is not correct:

<input class="checkbox__input" type="checkbox" [name]="'myCheckboxName' + i" [id]="'myCheckboxId' + i">

It's interpreting the entire id as a string and not inserting the numeric value so it looks like this: myCheckboxIdi

Perhaps try the following:

var html = ...;
for(var i = 0; i < options.checkTextArray.length; i++)
{
    var checkboxId = `myCheckboxId${i}`;
    html +=
    `
        <label class="checkbox" [attr.for]=${checkboxId}>
            <input class="checkbox__input" type="checkbox" [name]=${checkboxId} [id]=${checkboxId}>
            <div class="checkbox__box"></div>${options.checkTextArray[i]}: 
        </label>
        <br>
    `;
}

Notice how the value is now inserted in the string via the template string? This should work, but I didn't run it so it may need some modification. Your new code for accessing would be something like:

var ckbStateBuffer = new Array();
var txtContenBuffer = new Array();

for(var i = 0; i < options.checkTextArray.length; i++) {
    ckbStateBuffer.push(document.getElementById(`myCheckboxId${i}`).checked);
}

Something to this affect should fix your code. Let me know if you need more clarification.

edited Sep 21, 2019 at 17:43

answered Sep 20, 2019 at 23:38

Jarred Parr

1,2673 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Maximo 40000 Over a year ago

Hi Jarred and thanks for your reply. The problem still remains. I think it might be due to the inputs not being initialized yet? Not sure how it works, as all excperience I have in JS is this project I'm working on. Here's a fiddle I just made with all my code: https://jsfiddle.net/Maximo40000/uedfgt6m/. It doesn't seem to work in fiddle though, not sure why. You're supposed to see a window pop up after you click the button.

Jarred Parr Over a year ago

From what I'm seeing here, none of the checkboxes are even being rendered. Perhaps try getting that working before you loop through the checked fields might be a good sanity check.

Maximo 40000 Over a year ago

I'm sorry. I've got it working now, wasn't able to get the fiddle working correctly before (it's my first time using it). I got it working by putting the JS content in a script in HTML: jsfiddle.net/Maximo40000/uedfgt6m/28. A window containing a few checkboxes etc. should be appearing after you click the "change" button. Note that the "OK" and "Cancel" buttons on the window aren't working. This is because their handlers currently contain the "getElementById"'s wich still return "null". (see lines 142 - 149 & 159 - 164)

Jarred Parr Over a year ago

The problem in your code is that you're still passing the variable checkBoxId as a string. Notice how in my example I use the template string? You put this whole thing into a variable but did not re apply the template to place the variable. Here's what I did: <input class="checkbox__input" type="checkbox" [name]=checkBoxName [id]=${checkBoxId}> Here's what you did: <input class="checkbox__input" type="checkbox" [name]=checkBoxName [id]=checkBoxId> Do you notice the difference?

Jarred Parr Over a year ago

This was in part an error for me, I apologize for that. Updating my answer.

|

Maximo 40000 · Accepted Answer · 2019-09-23 01:29:11Z

0

Okay so I found a solution. Apparently you can't use getElementById(checkboxId) to get the checkbox states. You have to create an array using getElementsByTagName("input") and afterwards itterate through this array while checking for inputs of the checkbox type.

var inputsArray = document.getElementsByTagName("input");
var ckbStateBuffer = new Array();

for (var i = 0; i < 3; i++)
{

    if(inputsArray[i].type == "checkbox")
    {

        ckbStateBuffer.push(inputsArray[i].checked);

    }

}

JSFiddle here: https://jsfiddle.net/Maximo40000/agL9opq6/

A big thanks to Jarred Parr!

edited Sep 23, 2019 at 1:29

answered Sep 22, 2019 at 21:46

Maximo 40000

195 bronze badges

Collectives™ on Stack Overflow

How do I use getElementById on dynamically created inputs?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related