Estou fazendo um sistema de duas pilhas, onde ao clicar no botão o bloco de cima deve passar para o outro lado. Ao passar da esquerda para a direita o botão funciona normalmente, porém ao passar da direita para a esquerda, simplesmente nada ocorre. Segue o código:
let cores = {
azul: document.querySelector('#Azul').textContent,
vermelho: document.querySelector('#Vermelho').textContent,
verde: document.querySelector('#Verde').textContent,
roxo: document.querySelector('#Roxo').textContent,
laranja: document.querySelector('#Laranja').textContent,
preto: document.querySelector('#Preto').textContent
}
let pilha1 = [
cores.verde,
cores.vermelho,
cores.azul
]
let pilha2 = [
cores.preto,
cores.laranja,
cores.roxo
]
let res1 = document.querySelector('#res1')
let res2 = document.querySelector('#res2')
function passarDireita() {
if (pilha1.length == 0) {
alert('Não há mais blocos nessa pilha!')
} else {
let removido = pilha1.pop()
pilha2.push(removido)
res2.innerHTML += `<p id=${removido}>${removido}</p>`
let elem = document.querySelector(`#${removido}`)
elem.parentNode.removeChild(elem)
console.log(elem)
}
}
function passarEsquerda() {
if (pilha2.length == 0) {
alert('Não há mais blocos nessa pilha!')
} else {
let removido = pilha2.pop()
pilha1.push(removido)
res1.innerHTML += `<p id=${removido}>${removido}</p>`
let elem = document.querySelector(`#${removido}`)
elem.parentNode.removeChild(elem)
console.log(elem)
}
}
* {
margin: 0;
padding: 0;
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
}
section {
display: flex;
flex-direction: column;
}
#Azul {
background: blue;
padding: 15px 30px;
margin-right: 50px;
}
#Vermelho {
background: red;
padding: 15px 30px;
margin-right: 50px;
}
#Verde {
background: green;
padding: 15px 30px;
margin-right: 50px;
}
#Roxo {
background: purple;
padding: 15px 30px;
margin-right: 50px;
}
#Laranja {
background: orange;
padding: 15px 30px;
margin-right: 50px;
}
#Preto {
background: black;
padding: 15px 30px;
margin-right: 50px;
}
button {
padding: 15px 30px;
margin-right: 50px;
margin-top: 10px;
color: #000;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<section>
<p id="res1"></p>
<p id="Azul">Azul</p>
<p id="Vermelho">Vermelho</p>
<p id="Verde">Verde</p>
<button onclick="passarDireita()">Passar para Direita</button>
</section>
<section>
<p id="res2"></p>
<p id="Roxo">Roxo</p>
<p id="Laranja">Laranja</p>
<p id="Preto">Preto</p>
<button onclick="passarEsquerda()">Passar para Esquerda</button>
</section>
</main>
<script src="JS/js026.js"></script>
</body>
</html>