Can't select nested element with querySelector() for classic todo app

Question

My HTML is based on several boxes or containers, here's an ilustrative example of the code:

<div id="box">
    <div id="board">
        <div class="project" id="project-0">
            <h4 class="project-title">To-Do's<i class="arrowproject"></i></h4>
            <div class="todo" id="todo-0">
                <h4 class="todo-title">To-Do 1<i class="far fa-check-circle"></i><i class="arrowtodo" id="arrowtodo-0"></i></h4>
                <div class="todo-box"> 
                    <!-- Here goes the to-do's details -->
                </div>
            </div>
        </div>
    </div>
</div>

My goal is to select every <i class="arrowtodo" id="arrowtodo-0"></i> with querySelectorAll() and add an onClick listener for tab handling since that structure is added dynamically and is repeated. Simple.

The issue here is that querySelectorAll() and every other DOM method like getElementById() and so on, are reaching only to the h4 tag and when I try to select the element that I want or any other element beyond the h4 like <div class="todo" id="todo-0"> , it returns an empty NodeList.

The funny thing is if I select the <div class="project" id="project-0"> tag and console.log(), it succesfully selects all the content and I can see its children with no problem.

I really don't know what's happening. I'm starting to assume that there's a limit to nesting elements but when I searched online the limit it's way beyond 4 (that's the amount of levels that I have in my code).

Does anyone came across with this issue and fixed it or know what's going on?

Thanks in advance.

There is no practical nesting limit. Please show a [MCVE] that demonstrates your code not working as expected so that it can be debugged. — CertainPerformance, Nov 14 '20 at 23:04

sample · Answer 1 · 2020-11-15T01:49:58.833

"My goal is to select every with querySelectorAll()"

Since you didn't provide any javascript I can't tell you exactly what when wrong, but here are some possibilities:

"every":

you only have one class with arrowtodo (at least in the HTML provided).

id="arrowtodo-0":

evey id must be unique. you shouldn't use querySelectorAll() on an id to get more than one element.

Again, it's not clear why it wasn't working because you didn't provide your javascript, and possibly not all relevant HTML code (although it is definitely better than providing to much unnececary code). If you have any further questions, or if this answer didn't answer your question in partial or its entirety, please let me know in the comments. Anyway, bellow is my solution, with some extra elements added as examples:

var elements = document.getElementsByClassName("arrowtodo");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', myFunction, false);
}

document.getElementById("paragraph").addEventListener('click', myFunction, false);

function myFunction() {
  console.log('code goes here');
}

<div id="box">
  <div id="board">
    <div class="project" id="project-0">
      <h4 class="project-title">To-Do's<i class="arrowproject"></i></h4>
      <div class="todo" id="todo-0">
        <h4 class="todo-title">To-Do 1<i class="far fa-check-circle"></i> 
        <br> <br> <!-- two line breaks -->
        <i class="arrowtodo" id="arrowtodo-0"> arrowtodo</i></h4>
        <div class="todo-box">
          <i class="arrowtodo" id="arrowtodo-0">Another example</i>
          <p id='paragraph'> a 'p' tag with a unique Id </p>
          <!-- Here goes the to-do's details -->
        </div>
      </div>
    </div>
  </div>
</div>

Can't select nested element with querySelector() for classic todo app

1 Answers1