show and hide html elements with javascript

Question

show and hide html elements with javascript

Navigation

#1 by (1 votes)

0

I'm starting javascript and I have a problem. I want to create a FAQs website and when you click on a question, the answers are displayed. But when I click on the question I see this error in the browser log Can not read property 'getAttribute' of null and it does nothing I have seen that the class exists, that it has captured the element, and it does not I can look more. Attached html code and current javascript. Thanks in advance. By the way I want to do it by delegation of events

(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>

javascript html

asked by scorpions 17.10.2018 в 11:30

source

1 answer

How to handle Zebra printers and labels with C #? Implement currency format in a range type input

score 1 · Accepted Answer

Several things to keep in mind:

1.- As you said in the comment, you are not passing the element in the function. addEventListener expects a function as the second parameter. You can pass it to it as an anonymous function:

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

2.- Use of let and var: Get used to using let more often. var creates global variables which can give you problems of conflict between variables or unwanted behavior. More info here and here .

3.- Add the style of the images via CSS (I do not put it because I do not have the images in the solution)

4.- Declare the variable faqs : the JS engine is creating it with the DOM value "faqs" but this is a very bad idea (more info )

Things would be missing, such as changing the image of h2 when clicking

<!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>