Failure in the querySelectorAll() from JavaScript

Question

I'm having a problem when I try to get a element by using querySelectorAll.

Here is the part of HTML that I want to get from JS:

<div id="paginacao">
    <div class="pag-base"> <a href="#">{{1}}</a> </div>
    <div class="pag-base"><a href="#">{{2}}</a></div>
    <div class="pag-base"><a href="#">{{3}}</a></div>
    <div class="pag-base"><a href="#">{{4}}</a></div>
    <div class="pag-base"><a href="#">{{5}}</a></div>
    <div class="pag-base"><a href="#">{{6}}</a></div>
    <div class="pag-base"><a href="#">{{7}}</a></div>
    <div class="pag-base"><a href="#">{{8}}</a></div>
    <div class="pag-base"><a href="#">{{9}}</a></div>
    <div class="pag-base"><a href="#">{{10}}</a></div>
    <div class="pag-base"><a href="#">...</a></div>
  </div>

I'm doing this on JavaScript:

var pages = document.querySelectorAll(".pag-base a");
console.log(pages[0].textContent);

but this always returns undefined. Anyone knows what am I doing wrong?

Seems to work fine on fiddle. I'm assuming the '{{#}}' is text and not replaced by some templating engine. And I'm also assuming your running your command after the markup exists in the dom. — Taplar, Nov 19 '16 at 18:44

score 0 · Answer 1 · answered Nov 19 '16 at 18:52

0

that's because the script file is loading before your dom is ready .

try script tag below your div tag

answered Nov 19 '16 at 18:52

Mahi

1,659
8
19

Thanks, fella. That solved my problem – Flávio Nov 19 '16 at 18:55
@Flávio glad to help – Mahi Nov 19 '16 at 18:55

score -1 · Answer 2 · answered Nov 19 '16 at 18:46

Nothing wrong with your code.

Everything working as expected, see below

var pages = document.querySelectorAll(".pag-base a"); console.log(pages[0].textContent);
for(var i =0; i < pages.length; i++){
  console.log(pages[i].textContent);
}

<div id="paginacao">
    <div class="pag-base"> <a href="#">{{1}}</a> </div>
    <div class="pag-base"><a href="#">{{2}}</a></div>
    <div class="pag-base"><a href="#">{{3}}</a></div>
    <div class="pag-base"><a href="#">{{4}}</a></div>
    <div class="pag-base"><a href="#">{{5}}</a></div>
    <div class="pag-base"><a href="#">{{6}}</a></div>
    <div class="pag-base"><a href="#">{{7}}</a></div>
    <div class="pag-base"><a href="#">{{8}}</a></div>
    <div class="pag-base"><a href="#">{{9}}</a></div>
    <div class="pag-base"><a href="#">{{10}}</a></div>
    <div class="pag-base"><a href="#">...</a></div>
  </div>

Failure in the querySelectorAll() from JavaScript

2 Answers2