[Editar: gracias a la respuesta de Ganesh, me llevó por el camino correcto sobre cuál era el problema real. Así que gracias por eso. El problema estaba en mi bucle for . Dejé let i = 0, str = "" , lo que significaba que estaba creando una nueva str para el bucle, que era diferente de la str fuera del bucle. Esto significaba que cuando configuré el.innerHTML = str fuera del bucle, no era la str que se había creado en el bucle.]

Estoy creando un menú desplegable w3.css con lienzos y etiquetas. Me baso en el ejemplo con el título 'Mensajes desplegables en los que se puede hacer clic' en la página web 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>

Estoy agregando los elementos de divInnards en 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;

Sin embargo, cuando intento obtener divCanvas0 más adelante, obtengo un valor nulo.

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

¿Qué estoy haciendo mal?