estoy iniciándome en javascript y tengo un problema. Quiero hacer una web de FAQs y que al pinchar en una pregunta se desplieguen las respuestas. Pero al pinchar en la pregunta me aparece este error en el log del navegador Cannot read property 'getAttribute' of null y no hace nada he mirado que exista la clase, que haya capturado el elemento, y no se que puedo mirar más. Adjunto código html y javascript actual. Gracias de antemano. Por cierto quiero hacerlo por delegación de eventos
(function(){
window.addEventListener('load', function(){
var elementosH2 = faqs.getElementsByTagName("h2");
var nodoH2;
for(var i=0; i<elementosH2.length;i++){
nodoH2 = elementosH2[i];
nodoH2.addEventListener("click", cambiar);
}
function cambiar(e) {
var h2 = e.target; // h2 es el nodoH2 actual
if (h2.getAttribute("class") == "mas") {
h2.setAttribute("class", "menos");
}
else {
h2.setAttribute("class", "mas");
}
if (h2.nextElementSibling.getAttribute("class") == "cerrado") {
h2.nextElementSibling.setAttribute("class", "abierto");
}
else {
h2.nextElementSibling.setAttribute("class", "cerrado");
}
}
});
}());
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Ejercicio FAQs</title>
<script src="script.js" defer></script>
</head>
<body>
<section id="faqs">
<h1>FAQs</h1>
<h2 class="mas"><img src="mas.jpg"/> ¿Qué es jQuery?</h2>
<div class="cerrado">
<p>
<img name="" src="menos.jpg"/>
jQuery es una librería de funciones JavaScript que puedes utilizar para desarrollar sitios web.
</p>
</div>
<h2 class="mas"><img src="mas.jpg"/>¿Por qué es tan popular jQuery?</h2>
<div class="cerrado">
<p>
<img src="menos.jpg"/>Hay tres razones:
</p>
<ul>
<li>Es gratuito</li>
<li>Te permite hacer más cosas en menos tiempo</li>
<li>Sus funciones son compatibles con todos los navegadores</li>
</ul>
</div>
</section>
</body>
</html>
mas
ycerrado
pormenos
yabierto
y viceversa cuando pincho en un h2 y no obtengo errores