Verificar divs

[samucsouza 0]

Galera que é fera em javascript, como faço pra fazer uma verificação de divs

 

Ex. Tenho div1, div2 div3 quando as 3 forem clicadas gostaria de habilitar uma nova tela com uma mensagem final: Concluído.

 

Please...Obrigado!

 

 

[William Bruno 1501]

ou a cada click, vc verifica o status das outras duas.

 

ou vc vai setando uma variavel, para ir somando 1 a cada div ativa. Qndo chegar a 3, vc sabe q todas estarão ativas.

[samucsouza 0]

Desculpa estou começando a mexer com java script nao tenho idéia por onde começar, consegue postar um exemplo simples aqui? =/

[William Bruno 1501]

fiz um exemplo rapidinho aqui:

 

<style>
	.click-me { 
		width: 100px; height: 100px; 
		margin: 10px; 
		border: 1px solid #000;
		float: left;
	}
	.is-active { border: 1px solid #f00; }
	#result {
		border: 1px solid #000;
		display: none;
		clear: both;
		padding: 40px;
	}
</style>
<script>
(function(){
	var count = 0;

	var clickMe = function(){
		this.className = 'click-me is-active';
		count += 1;
		
		verifyDivs();
	}
	var verifyDivs = function(){
		if( count===3 ){
			document.getElementById('result').style.display = 'block';
		}		
	}
	window.onload = function(){
		var divs = document.getElementsByClassName('click-me');
		for( var i=0; i<divs.length; i++ ){
			divs[i].onclick = clickMe;
		}
	}	
})();
</script>

<div class="click-me"></div>
<div class="click-me"></div>
<div class="click-me"></div>

<div id="result">Resultado</div>

[samucsouza 0]

Legal Bruno aprendi aqui, muito obrigado!!!

 

Uma dúvida nesse código que vc fez:

 

Se eu clico 3 vezes na mesma div, ele ja mostra o resultado.

Como faria pra ele verificar se a div ja foi clicada, ex. aparecer o resultado apenas após eu clicar nas 3, não a cada 3 cliques?

 

Obg,

Samuel

[William Bruno 1501]

basta vc verificar, só disparando uma unica vez para cada div

	var clickMe = function(){
		if( this.className=='click-me' ){
			this.className = 'click-me is-active';
			count += 1;
			
			verifyDivs();
		}
	}

[samucsouza 0]

Consegui resolver Bruno:

 

<style>
.click-me { 
width: 100px; height: 100px; 
margin: 10px; 
border: 1px solid #000;
float: left;
}
.is-active { border: 1px solid #f00; }
#result {
border: 1px solid #000;
display: none;
clear: both;
padding: 40px;
}
</style>
 
<script>
var array = [];
(function(){
var count = 0;
 
var clickMe = function(){
debugger;
this.className = 'click-me is-active';
var achou = false;
for(x in array){
if(array[x] == this.id)
achou = true;
}
if(!achou)
array.push(this.id);
 
verifyDivs();
}
var verifyDivs = function(){
if( array.length >= 3 ){
document.getElementById('result').style.display = 'block';
}
}
window.onload = function(){
var divs = document.getElementsByClassName('click-me');
for( var i=0; i<divs.length; i++ ){
divs[i].onclick = clickMe;
}
}
})();
</script>
 

De qualquer forma muito obrigado pela ajuda ;D