JS querySelectorAll function does not select intended css class-CodePudding

I try to select the careerPoints class with JavaScript, but when I type querySelectorAll I get "undefined". Besides, when I type querySelector I can get only the first element on the loop.

This is my code:

<body>
  <h1>Hi</h1>

  {%for x in range(0, 16)%}
    <ul>
      <li scope="row"><p>Name:</p> {{dataName[x]['firstName']}} {{dataName[x]['lastName']}}</li>
      <li class="points"><p>Career Points</p><p class="careerPoints">{{dataName[x]['careerPoints']}}</p> </li>
      <li class="numbers"><img width="100px" src="{{dataName[x]['headShotUrl']}}" alt="{{dataName[x]['firstName']}} {{dataName[x]['lastName']}}"></li>
      <li class="numbers"><p>Height</p> {{dataName[x]['height']}}</li>
    </ul>
  {%endfor%}

  <script>
    var elements = document.querySelectorAll("careerPoints").text;
    console.log(elements);
   </script>
 </body>

CodePudding user response：

It should be querySelectorAll(".careerPoints").

querySelectorAll uses CSS selectors. In this case . selects the class. # would select the id, for example.

The other issue is this (I've added the . for convenience).

var elements = document.querySelectorAll(".careerPoints").text;

querySelectorAll returns a nodelist, so you can't just select text from it because there is no text property on a nodelist (note: there is no text property at all). You need to iterate over the nodelist and then select the textContent (or innerText which behaves a little differently) from each element. Here's a small example using forEach to log the text to the console.

const elements = document.querySelectorAll(".careerPoints");
elements.forEach(element => console.log(element.textContent));