[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> <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>" + " " + "<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?
porque después de la última itración, istr se convierte en 23, intente esto
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>" + " " + "<label id=\"divLabel" + iStr + "\">Name</label>" + "</a>"; el.innerHTML = str; }