Trato de seleccionar la clase de careerPoints de carrera con JavaScript, pero cuando escribo querySelectorAll aparece "indefinido". Además, cuando escribo querySelector solo puedo obtener el primer elemento del ciclo.
Este es mi código:
<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>Debería ser querySelectorAll(".careerPoints") .
querySelectorAll utiliza selectores CSS. En este . selecciona la clase. # seleccionaría la identificación, por ejemplo.
El otro problema es este (he agregado el . por conveniencia).
var elements = document.querySelectorAll(".careerPoints").text; querySelectorAll devuelve una lista de nodos, por lo que no puede simplemente seleccionar texto de ella porque no hay una propiedad de texto en una lista de nodos (nota: no hay propiedad de text en absoluto). Debe iterar sobre la lista de nodos y luego seleccionar el contenido de textContent (o innerText que se comporta de manera un poco diferente) de cada elemento. Aquí hay un pequeño ejemplo usando forEach para registrar el texto en la consola.
const elements = document.querySelectorAll(".careerPoints"); elements.forEach(element => console.log(element.textContent));