0

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>

4
  • Tu función cambiar(e) requiere que le pases el parámetro e, como no se lo pasas al llamarla no reconoce el elemento que defines a partir de este parámetro y no puede encontrar atributos de algo no definido.
    – Carmen
    Commented el 17 oct. 2018 a las 11:57
  • Gracias por la respuesta @Carmen y como podría llamar a mi función pasandole los parámetros??
    – scorpions
    Commented el 17 oct. 2018 a las 12:01
  • cambiar(nodoH2) por ejemplo dentro de tu bucle.
    – Carmen
    Commented el 17 oct. 2018 a las 12:13
  • a mi me funciona tu código, cambia las clases mas y cerrado por menos y abierto y viceversa cuando pincho en un h2 y no obtengo errores
    – user7176
    Commented el 17 oct. 2018 a las 12:56

1 respuesta 1

1

Varias cosas a tener en cuenta:

1.- Como te decían en el comentario, no estás pasándole el elemento en la función. addEventListener espera una función como segundo parámetro. Puedes pasárselo como una función anónima:

nodoH2.addEventListener("click", function(){cambiar(this)});

2.- Uso de let y var: Acostúmbrate a usar let más a menudo. var crea variables globales lo que te puede dar problemas de conflicto entre variables o comportamientos no deseados. Más info aquí y aquí.

3.- Añadir el estilo de las imágenes vía CSS (no lo pongo porque no tengo las imágenes en la solución)

4.- Declarar la variable faqs: el motor de JS te la está creando con el valor del DOM "faqs" pero esto es una muy mala idea (más info)

Faltarían cosas como, por ejemplo, cambiar la imagen de los h2 al hacer click

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Ejercicio FAQs</title>  
  <style>
  .mas{display:inline;}
  .cerrado{display:none;}
  </style>
</head>

<body>
<section id="faqs">
    <h1>FAQs</h1>
		<h2 class="mas"><img src="https://cdn3.iconfinder.com/data/icons/fatcow/32/add.png"/> ¿Qué es jQuery?</h2>
		<div class="cerrado">
			<p>					
				jQuery es una librería de funciones JavaScript que puedes utilizar para desarrollar sitios web.
			</p>
		</div>
		<br/>
		<h2 class="mas"><img src="https://cdn3.iconfinder.com/data/icons/fatcow/32/add.png"/>¿Por qué es tan popular jQuery?</h2>
		<div class="cerrado">
			<p>
				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>
<script>
(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", function(){cambiar(this)});
}

function cambiar(e) {
		var h2 = e; // 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");
		}
	}
});
}());
</script>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.