Seleccionar varios id con document.querySelectorAll

[mensajeescrito]

Hola amigas y amigos a ver si me pueden echar una mano con esto:

Necesito seleccionar varios id por eso creo que tengo que usar queryselectorall

Para un solo id uso esto:

Código Javascript:

document.getElementById("icono")
 

y para varios id uso esto:

Código Javascript:

document.querySelectorAll("#icono");
 

Pero no me funciona

Pondre el codigo a ver si me pueden ayudar:
Si me ayudan a que me seleccione un id con queryselectorall supongo que añadirle varios id mas , deberia ser facil pero no me funciona

Código HTML:

<div id="icono"></div>
 

Código Javascript:

var varIcono = document.querySelectorAll("#icono");
 
                for (i = 0; i <= 5; i++) 
 
                    {
                        if(varPuntuacion.value == i)
 
                            {                           
varIcono.innerHTML="<img src='imgs/icono_" + [i-1] + ".png' style='margin-left:" + ( ([i-1]*fragmentoAnchura) - ([i-1]*17.5) ) + "px;'>";
                            }
                    }
 

gracias de antemano

[ArturoGallegos]

en lugar de usar un ID utiliza una clase, recuerda que el ID debe ser unico en todo el documento.

[mensajeescrito]

Hola Arturo, pues he puesto class="pizza" y class="kebab".

y tambien he puesto

Código Javascript:

document.querySelectorAll(".pizza,.kebab");
 

Y sigue sin funcionar.


Es mas pero con queryselectorall , se podian seleccionar tanto class como ids tambien

¿O estoy equivocado?

[eContento]

Me figuro que es porque varIcono es un array.

Prueba a poner varIcono[i].innerHTML...

[ArturoGallegos]

Si se puede obtener multiples IDs separados por coma, pense que intentabas usar el mismo ID en multiples elementos.

Viendo de nuevo tu código, es ta mal planteado, querySelectorAll genera un array con los elementos obtenidos, asi sea un solo elemento sera un array

Esto siempre te dara error

Código Javascript:

var varIcono = document.querySelectorAll("#icono");
varIcono.innerHTML="<img src='imgs/
 

por lo que debes acceder mediante su index, por ejemplo

Código Javascript:

var arr = document.querySelectorAll('.demo,.pizza,.comida');
for(var i=0;i<arr.length; i++){
    console.log(arr[i]);
}
 

[eContento]

El otro error que tenía tu código es que una imagen su innerHTML es "".

En todo caso será su outerHTML pero ya andas jugando con fuego. Es preferible quitar el objeto del DOM y añadir uno nuevo. El problema es que si la imagen que quitas del DOM tiene registrado algún listener para eventos, aunque borres el elemento y lo quites del DOM, como tiene alguien que lo referencia (el escuchador del evento), no lo quitaras de la memoria.

Esto suele ser una fuente de Memory Leaks en JavaScript.

La mayoría de los frameworks te abstraen de cometer estos errores, pues ya hacen esas comprobaciones internamente, y gestionan los correspondientes unbind pero ¿Quién quiere frameworks sabiendo JavaScript?

Espero haberte ayudado.