Sé que hay muchas preguntas con respecto a que getElementsByClassName no funciona, sin embargo, revisé muchas y no pude encontrar una respuesta para mi situación.
Básicamente tengo el siguiente código
<script> var res = localStorage.getItem('img'); if(res == null){ const myList = ['🐒', '🐕', '🐈', '🐅', '🐎', '🦓', '🐄', '🦒', '🐘', '🦔', '🦉', '🐊', '🦖', '🐬', '🦈', '🦋', '🐞', '🦂']; res = myList[Math.floor(Math.random() * myList.length)]; localStorage.setItem('img', res); } console.log(res); document.getElementsByClassName("emoji").innerHTML = resY varios tramos con la misma clase
<span class="emoji" style="font-size: 40px !important;"></span>El problema es que el "res" no imprime nada en el intervalo.
El registro de la consola imprime todo bien y LS almacena la información perfectamente
he probado con dni
document.getElementsById("emoji").innerHTML = resY funciona perfectamente, sin embargo, solo con el primer div (como debería, supongo)
¿Qué podría estar haciendo mal en esta situación? Tal vez estoy ciego y no veo un error muy simple en mi código
Gracias por adelantado
Múltiples elementos pueden tener el mismo nombre de clase. getElementsByClassName devuelve una matriz de elementos que tienen el nombre de la clase (es Elements , no Element ). Entonces, si solo tiene 1 elemento con ese nombre de clase, puede hacer document.getElementsByClassName("emoji")[0].innerHTML = res .
Si especifica el nombre de la classname , debe dar un índice a la clase, ya que pone la respuesta solo en el primer elemento en el caso de la identificación, es única, pero en el caso de la clase, debe especificarla.
document.getElementsByClassName("emoji")[0].innerHTML = res;getElementByClassName siempre devuelve una matriz de elementos, generalmente puede leer un elemento de la matriz como base de índice, también de manera similar puede obtener el elemento de getElementByClassName. Consulte el fragmento a continuación.
const myList = ['🐒', '🐕', '🐈', '🐅', '🐎', '🦓', '🐄', '🦒', '🐘', '🦔', '🦉', '🐊', '🦖', '🐬', '🦈', '🦋', '🐞', '🦂']; var res = myList[Math.floor(Math.random() * myList.length)]; document.getElementsByClassName("emoji")[0].innerHTML = res <span class="emoji" style="font-size: 40px !important;"></span>