Code being executed only when double-clicking?

Question

Code being executed only when double-clicking?

Navigation

#1 by (1 votes)

1

Well, I needed to make clicking on a button show the div's and if clicking another button and displaying some div (display: block;) would get a display: none; was 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>

Home 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.
OBS: Using only HTML, CSS and JS (Without jQuery) .Se You can also show a solution with jQuery using some effect like toggle. Grateful.

javascript html css

asked by anonymous 05.07.2017 / 00:18

1 answer

Abstraction of the Connection PHP PDO class DataTables - Default ordering

score 1 · Accepted Answer

The problem you are facing is that even though the elements start to hide the display.style property of each of them starts empty, then it changes to none and then it shows.

That's why you have to give two clicks to show.

However, all of the code is a bit repetitive. 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>

This implies also changing the call the function in html to onclick="ativar(0)" to first li , and so on to the rest.

JQuery

For jquery you would not need the onclick attributes in li , just as you would not need an 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
      }
    });
});