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>
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));