Code being performed only when double-clicking?

Asked

Viewed 224 times

1

Well, I had to make sure that when I click on a button I would show the div’s and if I click on another button and some div is showing up (display:block;) I would acquire a display: None; that’s what I did in the code below:

function movel(){
	var divMovel = document.getElementById("divMovel");

	if(divMovel.style.display == "none" || divRoupa.style.display == "block" || divOutros.style.display == "block" || divCozinha.style.display == "block"){
		divMovel.style.display = "block";
		divRoupa.style.display = "none";
		divOutros.style.display = "none";
		divCozinha.style.display = "none";
	}

	else{
		divMovel.style.display = "none";
	}
};

function roupa(){
	var divRoupa = document.getElementById("divRoupa");
	
	if(divRoupa.style.display == "none" || divMovel.style.display == "block" || divOutros.style.display == "block" || divCozinha.style.display == "block" ){
		divMovel.style.display = "none";
		divOutros.style.display = "none";
		divCozinha.style.display = "none";
		divRoupa.style.display = "block";
	}
	else{
		divRoupa.style.display = "none";
	}
};

function outros(){
	var divOutros = document.getElementById("divOutros");
	
	if(divOutros.style.display == "none" || divRoupa.style.display == "block" || divMovel.style.display == "block" || divCozinha.style.display == "block" ){
		divRoupa.style.display = "none";
		divMovel.style.display = "none";
		divCozinha.style.display = "none";
		divOutros.style.display = "block";
	}
	else{
		divOutros.style.display = "none";
	}
};

function cozinha(){
	var divCozinha = document.getElementById("divCozinha");
	
	if(divCozinha.style.display == "none" || divRoupa.style.display == "block" || divMovel.style.display == "block" || divOutros.style.display == "block"){
		divRoupa.style.display = "none";
		divMovel.style.display = "none";
		divOutros.style.display = "none";
		divCozinha.style.display = "block";
	}
	else{
		divCozinha.style.display = "none";
	}
};
.itens{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: white;
}
.moveis{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: green;
	display: none;
}
.roupa{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: blue;
	display: none;

}
.outros{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: red;
	display: none;

}
.cozinha{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: black;
	display: none;

}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div class="boxGeral">
		<aside class="classes">
			<ul>
        <!--Os botões -->
				<li><button id="linkMovel" onclick="movel()">Móveis</button></li>
				<li><button id="linkRoupa" onclick="roupa()">Roupas</button></li>
				<li><button id="linkOutros" onclick="outros()">Outros</button></li>
				<li><button id="linkCozinha" onclick="cozinha()">Itens de Cozinha</button></li>
			</ul>
		</aside>
    <!--As div que irão aparecer -->
		<article class="itens">
			<div class="moveis" id="divMovel">
				asdasdasd
			</div>
			<div class="roupa" id="divRoupa">
				333333
			</div>
			<div class="outros" id="divOutros">
				333333
			</div>
			<div class="cozinha" id="divCozinha">
				333333
			</div>
		</article>
	</div>
</body>
</html>

But for some reason the script only runs when you double click on the button, I want to know the solution that will make it appear like this when you click.
NOTE: Using only HTML, CSS and JS (No jQuery). If possible also show a solution with jQuery using some effect like toggle. Thankful.

javascript html css

1 answer

1


The problem is that even though the elements start to hide the property display.style of each of them begins empty, then passes to none and only then shows.

That’s why you have to double-click to show.

However, the whole code is a bit repeated. A better solution to the problem would be:

var divs = [
  document.getElementById("divMovel"),
  document.getElementById("divRoupa"),
  document.getElementById("divOutros"),
  document.getElementById("divCozinha")
]; //criar um array com todos os divs a mostrar

divs.forEach(x => x.style.display = "none"); //iniciar todos escondidos

//funcao agora para todos os botoes, que recebe a posicao do div a controlar
function ativar(posicao){      
  if (divs[posicao].style.display == "none"){ 
    divs.forEach(x => x.style.display = "none"); //esconde todos os outros
    divs[posicao].style.display = "block"; //mostra este
  }
  else {
    divs[posicao].style.display = "none";
  }
}
.itens{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: white;
}
.moveis{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: green;
	display: none;
}
.roupa{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: blue;
	display: none;

}
.outros{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: red;
	display: none;

}
.cozinha{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: black;
	display: none;

}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div class="boxGeral">
		<aside class="classes">
                        <!--Os botões -->
			<ul>       
				<li><button id="linkMovel" onclick="ativar(0)">Móveis</button></li>
				<li><button id="linkRoupa" onclick="ativar(1)">Roupas</button></li>
				<li><button id="linkOutros" onclick="ativar(2)">Outros</button></li>
				<li><button id="linkCozinha" onclick="ativar(3)">Itens de Cozinha</button></li>
			</ul>
		</aside>

                <!--As div que irão aparecer -->
		<article class="itens">
			<div class="moveis" id="divMovel">
				asdasdasd
			</div>
			<div class="roupa" id="divRoupa">
				333333
			</div>
			<div class="outros" id="divOutros">
				333333
			</div>
			<div class="cozinha" id="divCozinha">
				333333
			</div>
		</article>
	</div>
</body>
</html>

Which also meant changing the function call in html to onclick="ativar(0)" to the first li, and so on to the others.

Jquery

For jquery would not need attributes onclick us li, just as it would not need a array to control the various elements.

$(function(){
    $(".classes li").click(function(){
      //construir a posição clicada com base no li
      var indice = $(this).index() + 1; 
      //ir buscar o elemento correspondente com base no seletor nth-child
      var elemento = $(".itens > div:nth-child(" + indice + ")"); 

      if (elemento.is(":visible") === true) { //ver se esta visível
        elemento.hide(); //esconder o elemento corrente se estava visível
      }
      else {
        $(".itens > div").hide(); //esconder todos
        elemento.show(); //mostrar o que interessa
      }
    });
});

  • Very good, but when I took the "Else" of my functions stopped working the script, it would be for what reason ?

  • 1

    Without Else the element would never go to display.none, soon after too I could not return to display.block by the logic of ifs

  • For some reason I copied your code from both jQuery and the other and it didn’t work but I was able to solve only by adding a .style.display = "None", after the declaration of each variable of each function making them already start as None, besides being able to take the Else.

  • Jquery to work must be inside $(function(){ });, which is what ensures that code is only interpreted after html is built. As for the normal Js is strange because the snippet works perfectly.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.