I have a series of divs with different classes, but inside each of these divs, there are other divs. What I try is:
- Select the father.
- Then select one of its children (The one that contains a specific class).
- To this child, using innerHTML += "text" assign a piece of HTML.
1 and 2 I got it like this...
let areaElement = document.querySelectorAll(".alumno_"+alumno_id+" > .be-area-rating");
With a selector query I select the parent... And immediately tell it which of the children to select.
But when I try to put an innerHTML on this I get undefined
.
let areaElement = document.querySelectorAll(".alumno_"+alumno.alumno_id+" > .be-area-rating").innerHTML;
Does anyone know why?
The HTML is this; I am using Laravel so I use {{}}
to declare a 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>
QuerySelectorAll returns an array, it does not have innerHTML you must work with an iterator
I have a similar solution, see if it gives you an idea of what you want:
since you have elements inside other elements you have to do a double iteration to check if it has the specified class or not.