Rotação javaScript loop

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;

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);

});