Adding Elements with Ids to a Div so I can access the new Elements with getElementById

Question

[Edit: Thanks to Ganesh's answer, it led me on the right track to what the actual problem was. So thanks for that. The problem was in my for loop I have let i = 0, str = "", which meant I was creating a new str for the loop, which was different than the str outside the loop. This meant when I set el.innerHTML = str outside the loop, it was not the str that had been created in the loop.]

I am creating a w3.css dropdown with canvases and labels in it. I am basing it on the example with the title 'Clickable Dropdowns' on the webpage W3.CSS Dropdowns.

<div class="w3-dropdown-click">
    <button onclick="OnClickDoStuff()" class="w3-button w3-black">
        <canvas id="imageMain"></canvas>
        &nbsp;
        <label id="labelMain">Name</label>
    </button>
    <div id="divInnards" class="w3-dropdown-content w3-bar-block w3-border">
        <!-- Stuff inserted with javascript -->
    </div>
</div>

I am adding the elements of divInnards in javascript.

let el = document.getElementById("divInnards");
let str, iStr;

for(let i=0, str = "";i < 24; i++){
    iStr = i.toString();
    str += "<a href=\"#\" class=\"w3-bar-item w3-button\""
                    + " id=\"divLink" + iStr + "\""
                    + " onclick=\"OnClickLink(" + iStr + ")\""
            + ">"
            + "<canvas id=\"divCanvas" + iStr + "\" ></canvas>"
            + "&nbsp;"
            + "<label id=\"divLabel" + iStr + "\">Name</label>"
        + "</a>";
}
el.innerHTML = str;

However, then when I try and get divCanvas0 later on, I get null.

let cnv = document.getElementById("divCanvas0"); // cnv === null :(

What am I doing wrong?

Are you sure the canvas actually exists on the page when you are executing the getElementById? Inspect the page and check. That is the likely issue. — Deadron, Sep 15 '21 at 18:02
@Deadron, I am using Visual Studio Code, how do I do that? I can inspect `document`, but where would it be under in the `document` tree? — Rewind, Sep 15 '21 at 18:04
No, the content I am adding with javascript to `divInnards` does not appear to have been added to the document. — Rewind, Sep 15 '21 at 18:18
Well you can't retrieve something that doesn't exist so your problem is in the code inserting the content. — Deadron, Sep 15 '21 at 18:22

score 0 · Answer 1 · answered Sep 15 '21 at 18:44

because after laste itration istr becomes 23, try this

let el = document.getElementById("divInnards");
let str, iStr;

for(let i=0;i < 24; i++){
    iStr = i.toString();
    str +=  "<a href=\"#\" class=\"w3-bar-item w3-button\""
                    + " id=\"divLink" + iStr + "\""
                    + " onclick=\"OnClickLink(" + iStr + ")\""
            + ">"
            + "<canvas id=\"divCanvas" + iStr + "\" ></canvas>"
            + "&nbsp;"
            + "<label id=\"divLabel" + iStr + "\">Name</label>"
        + "</a>";
        
        el.innerHTML = str;
  



}

in the first iteration I get `innerHTML` with `undefined – Rewind Sep 15 '21 at 19:38 — Rewind, Sep 15 '21 at 19:38

Adding Elements with Ids to a Div so I can access the new Elements with getElementById

1 Answers1