2

Tengo una serie de divs con clases distintas, pero dentro de cada uno de estos divs, existen otros divs. Lo que intento es:

  1. Seleccionar al padre.
  2. Luego seleccionar a uno de sus hijos (El que contenga una clase específica).
  3. A este hijo, mediante innerHTML += "texto" asignarle un pedazo de HTML.

El 1 y 2 lo conseguí así...

let areaElement = document.querySelectorAll(".alumno_"+alumno_id+" > .be-area-rating");

Con un query selector selecciono al padre... E inmediatamente le digo cual de los hijos debe seleccionar.

Pero cuando a esto intento ponerle un innerHTML me sale undefined.

let areaElement = document.querySelectorAll(".alumno_"+alumno.alumno_id+" > .be-area-rating").innerHTML;

¿Alguien sabe por qué?

El HTML es este; estoy usando Laravel por eso uso {{}} para declarar una variable:

<div class="cell not-border alumno_{{$alumno->alumno_id}}" id="be-area-rating">
<div class="rowTable be-area-rating">
    <div class="cell rating do-area">20</div>
    <div class="cell rating do-area">20</div>
</div>
</div>
<div class="cell not-border alumno_{{$alumno->alumno_id}} " id="do-area-rating">
<div class="rowTable do-area-rating">
    <div class="cell rating do-area">20</div>
    <div class="cell rating do-area">20</div>
</div>
</div>
5
  • Puedes poner un ejemplo del HTML ??
    – Yussef
    el 21 sep. 2022 a las 3:45
  • claro, dame un minuto el 21 sep. 2022 a las 3:48
  • Ya no importa :P Te acaban de dar la respuesta
    – Yussef
    el 21 sep. 2022 a las 3:49
  • En todo caso "be-area-rating" la tienes como clase única, podría usarla y listo documen.querySelector(".be-area-rating")
    – Yussef
    el 21 sep. 2022 a las 3:58
  • 1
    be-area-rating es unica dentro de cada div alumno pero, existen muchos *div alumno solo que cada uno tiene un distinto numero de alumno el 21 sep. 2022 a las 4:02

2 respuestas 2

3

Tengo una solucion parecida fijate si te da una idea de lo que queres:

    document.querySelectorAll(".containers").forEach(container => { // para cada contenedor:
        for(const children of container.children){ // para cada hijo del contenedor: 
          if(children.classList.contains("claseespecial")) children.innerHTML = `<p>AQUI SE INSERTO UN PARRAFO EN LA CLASE ESPECIAL</p>` 
          // si contiene la clase especificada se agrega un <p> con un msj
     }
})

como tenes elementos dentro de otros elementos tenes que hacer una doble iteracion para comprobar si tiene la clase especificada o no.

4
  • 1
    Esta solucion si funcionaria. De todas maneras, encontre una solucion en menos lineas de codigo... simplemente debia poner .[0].innerHTML ya que se trataba de un array. Y ya con eso quedó. Pero muchas gracias, tu solucion es valida el 21 sep. 2022 a las 3:59
  • 1
    @AldahirRuizValdez si ocupas [0] es que no necesitas el array, pone sencillamente document.querySelector(".alumno_"+alumno.alumno_id+" > .be-area-rating")
    – Yussef
    el 21 sep. 2022 a las 4:05
  • @Yussef justamente eso pensaba, si va directamente por el indice es porque ya sabe cual elemento tiene la clase especifica, yo supuse que tenia que hacer una busqueda entre todos los hijos y verificar esa condicion. el 21 sep. 2022 a las 4:08
  • Por algun motivo, si no pongo el [0] no me permite poner el innerHTML, mea rroja undefined... pero con el [0] funciona bien, no entiendo porque. Yo pense lo mismo, se supone que estoy seleccionando ya a uno de sus hijos especifico, (osea la clase be-area-rating) pero por algun motivo no me deja si no pongo la posicion del array el 21 sep. 2022 a las 12:55
3

QuerySelectorAll devuelve un array, no tiene innerHTML debes trabajarlo con un iterador

1
  • Gracias, la respuesta me ayudó. Pero en mi caso, como ya seleccinaba un elemento especifico, lo que me faltaba era determinar en el array la posicion. En mi cas element.[0].innerHTML el 21 sep. 2022 a las 3:56

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.