-2

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>

1 Resposta 1

2

O elemento tem de ser removido antes de ser adicionado à outra pilha. Não podemos ter 2 IDs iguais ao mesmo tempo.

function passarDireita() {
    if (pilha1.length == 0) {
        alert('Não há mais blocos nessa pilha!')
    } else {
        let removido = pilha1.pop()
        let elem = document.querySelector(`#${removido}`)
        elem.parentNode.removeChild(elem)
        pilha2.push(removido)
        res2.innerHTML += `<p id=${removido}>${removido}</p>`
        console.log(elem)
    }
}

function passarEsquerda() {
    if (pilha2.length == 0) {
        alert('Não há mais blocos nessa pilha!')
    } else {
        let removido = pilha2.pop()
        let elem = document.querySelector(`#${removido}`)
        elem.parentNode.removeChild(elem)
        pilha1.push(removido)
        res1.innerHTML += `<p id=${removido}>${removido}</p>`
        console.log(elem)
    }
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .