Rotação javaScript loop

[everton881 0]

Pessoal preciso de mas uma ajuda, vê só estou fazendo o loop ao clicar no botão. Só que ao clicar no botão ele faz todo o loop até o final e o valor alterado na pagina é do ultimo if, queria que ao clicar no botão ele passasse por cada if. Obs: ja tentei com o for.

 

 
var pos1 = document.querySelectorAll(".posicoes")[0];
var pos2 = document.querySelectorAll(".posicoes")[1];
var pos3 = document.querySelectorAll(".posicoes")[2];
var pos4 = document.querySelectorAll(".posicoes")[3];
 
 
var posicao1 = "<p id='posicao1' >posição 1</p>";
var posicao2 = "<p id='posicao2' >posição 2</p>";
var posicao3 = "<p id='posicao3' >posição 3</p>";
var posicao4 = "<p id='posicao4' >posição 4</p>";
pos1.innerHTML = pos1.innerHTML + posicao1;
pos2.innerHTML = pos2.innerHTML + posicao2;
pos3.innerHTML = pos3.innerHTML + posicao3;
pos4.innerHTML = pos4.innerHTML + posicao4;
var reload = document.querySelector("#reload");
 
 
reload.addEventListener("click", function(event){
 
event.preventDefault();
var executar = true;
var rotacao = 1;
while(executar){
if(rotacao == 1){
pos1.innerHTML = posicao4;
pos2.innerHTML = posicao1;
pos3.innerHTML =posicao2;
pos4.innerHTML = posicao3;
console.log(pos1);
rotacao++;
}else if(rotacao == 2){
pos1.innerHTML = posicao3;
pos2.innerHTML = posicao4;
pos3.innerHTML =posicao1;
pos4.innerHTML = posicao2;
console.log(pos1);
rotacao++;
}else if(rotacao == 3){
pos1.innerHTML = posicao2;
pos2.innerHTML = posicao3;
pos3.innerHTML =posicao4;
pos4.innerHTML = posicao1;
console.log(pos1);
rotacao++;
}else if(rotacao == 4){
pos1.innerHTML = posicao1;
pos2.innerHTML = posicao2;
pos3.innerHTML =posicao3;
pos4.innerHTML = posicao4;
console.log(pos1);
rotacao = 1;
executar = false;
}
console.log(rotacao);
}
console.log(pos1);
console.log(pos2);
console.log(pos3);
console.log(pos4);
 
 
});

[Rafael Sirotheau 43]

Nao entendi bem... mas, pelo que entendi, não é só tirar o while? deixando apenas os ifs?

var rotacao = 1;

reload.addEventListener("click", function(event){
 
	event.preventDefault();
	var executar = true;

	if(rotacao == 1){
		pos1.innerHTML = posicao4;
		pos2.innerHTML = posicao1;
		pos3.innerHTML =posicao2;
		pos4.innerHTML = posicao3;
		console.log(pos1);
		rotacao++;
	}else if(rotacao == 2){
		pos1.innerHTML = posicao3;
		pos2.innerHTML = posicao4;
		pos3.innerHTML =posicao1;
		pos4.innerHTML = posicao2;
		console.log(pos1);
		rotacao++;
	}else if(rotacao == 3){
		pos1.innerHTML = posicao2;
		pos2.innerHTML = posicao3;
		pos3.innerHTML =posicao4;
		pos4.innerHTML = posicao1;
		console.log(pos1);
		rotacao++;
	}else if(rotacao == 4){
		pos1.innerHTML = posicao1;
		pos2.innerHTML = posicao2;
		pos3.innerHTML =posicao3;
		pos4.innerHTML = posicao4;
		console.log(pos1);
		rotacao = 1;
		executar = false;
	}
	
	console.log(rotacao);
	console.log(pos1);
	console.log(pos2);
	console.log(pos3);
	console.log(pos4);
});

Não mudei muito a estrutura do teu código, só removi o if e reposicionei a declaração da variavel fora do eventListener. Da pra otimizar, e muito, ele. :)

[everton881 0]

Não, eu testei só com os ifs e tbm não funcionou, teria que arrumar alguma forma de passar por cada if ao clicar no botão, e utilizando só if não alterava os valores e na forma do while ele altera os valores mas só imprime na pagina o ultimo resultado. No console.log que fiz nos ifs ele imprime normal, eu queria imprimir cada if desse a cada click.

[Rafael Sirotheau 43]

Como assim passar por cada if? Não faz muito sentido você querer que ele execute todos os if e, ainda assim, utilizar if-else...

Explique melhor: o que esperas que teu código faça? Qual a função dele? Sua explicação ta um pouco confusa...

Ps.: Você chegou a testar a solução que te dei acima? O que ela não fez que você esperava que seu código fizesse?

[everton881 0]

vê só estou tentando fazer o seguinte. Tenho que fazer 4 banners girarem a cada reload da pagina, no caso para testar eu fiz com um botão, a cada clique do botão eu quero que ele pare em um if para mudar a posição do banner. por exemplo: banner da posição1 vai para posição 2 e o banner que esta na posição 2 vai para posição 3 e assim sucessivamente, com o segundo clique do botão o banner1 que ta na posição 2 vai para a posição 3 e assim em diante. no código que fiz ele esta fazendo isso. só que ele imprime na pagina o ultimo if, porque ele não para a cada clique ele executa todo o while e no final que mostra o resultado do ultimo if. como coloquei o console.log em cada if ele mostra o resultado que esperava no console, mas eu não quero que execute todos os ifs de uma vez e sim um if a cada clique. vê se deu para entender.

[everton881 0]

Rafael consegui resolver do jeito que você falou retirei a variável rotação do evento e adicionei o return la no final do código. Valeu cara pela ajuda.

 

o Código ficou da seguinte forma:

 

var pos1 = document.querySelectorAll(".posicoes")[0];

var pos2 = document.querySelectorAll(".posicoes")[1];

var pos3 = document.querySelectorAll(".posicoes")[2];

var pos4 = document.querySelectorAll(".posicoes")[3];

var posicao1 = "<p id='posicao1' >posição 1</p>";

var posicao2 = "<p id='posicao2' >posição 2</p>";

var posicao3 = "<p id='posicao3' >posição 3</p>";

var posicao4 = "<p id='posicao4' >posição 4</p>";

pos1.innerHTML = pos1.innerHTML + posicao1;

pos2.innerHTML = pos2.innerHTML + posicao2;

pos3.innerHTML = pos3.innerHTML + posicao3;

pos4.innerHTML = pos4.innerHTML + posicao4;

var reload = document.querySelector("#reload");

var rotacao = 1;

reload.addEventListener("click", function(event){

event.preventDefault();

var executar = true;

if(rotacao == 1){

pos1.innerHTML = posicao4;

pos2.innerHTML = posicao1;

pos3.innerHTML =posicao2;

pos4.innerHTML = posicao3;

console.log(pos1);

rotacao++;

}else if(rotacao == 2){

pos1.innerHTML = posicao3;

pos2.innerHTML = posicao4;

pos3.innerHTML =posicao1;

pos4.innerHTML = posicao2;

console.log(pos1);

rotacao++;

}else if(rotacao == 3){

pos1.innerHTML = posicao2;

pos2.innerHTML = posicao3;

pos3.innerHTML =posicao4;

pos4.innerHTML = posicao1;

console.log(pos1);

rotacao++;

}else if(rotacao == 4){

pos1.innerHTML = posicao1;

pos2.innerHTML = posicao2;

pos3.innerHTML =posicao3;

pos4.innerHTML = posicao4;

console.log(pos1);

rotacao = 1;

}

return rotacao;

console.log(rotacao);

console.log(pos1);

console.log(pos2);

console.log(pos3);

console.log(pos4);

});