0

Olá,

Tenho 3 div's: uma que funciona como botão e outras duas como caixa de cores.

Preciso que ao clicar na div que funciona como botão a div COR 2 feche e a COR 1 fique visível.

Esta funciona como botão:

<div onclick="Mudarestado('minhaDiv')">ALTERNAR</div>

Estas são caixas de cores:

<div id="minhaDiv" style="display:none;">COR 1</div>
<div id="minhaDiv" style="display:block;">COR 2</div>

Java Script:

<script type="text/javascript">
function confirmadeletar(el) {
        var display = document.getElementById(el).style.display;
        if(display == "none")
            document.getElementById(el).style.display = 'block';
        else
            document.getElementById(el).style.display = 'none';
    }
</script>
2
  • 1
    tu percebeu que o id das divs estão iguais? id="minhaDiv"
    – Oliveira
    Commented 16/04/2019 às 18:26
  • ideal nesse caso é ter uma div só e ai alternar a classe css cada uma com estilo diferente Commented 16/04/2019 às 18:29

2 Respostas 2

1

O id das divs estão iguais e você não está chamando a função que está no script, veja como fica após as correções:

<div onclick="Mudarestado()">ALTERNAR</div>

<div id="minhaDiv1" style="display:none;">COR 1</div>
<div id="minhaDiv2" style="display:block;">COR 2</div>

<script type="text/javascript">
function Mudarestado(el) {
        var display1 = document.getElementById('minhaDiv1').style.display;
        var display2 = document.getElementById('minhaDiv2').style.display;
        if(display1 == "none") {
            document.getElementById('minhaDiv1').style.display = 'block';
            document.getElementById('minhaDiv2').style.display = 'none';
        } else {
            document.getElementById('minhaDiv2').style.display = 'block';
            document.getElementById('minhaDiv1').style.display = 'none';
        }
    }
</script>

1

Uma <div> fazer papel de botão é estranho e não ajuda os leitores de tela e nem a semântica de um documento HTML.

Mas, de qualquer maneira, a solução performática seria usar CSS para mostrar/esconder as <div>s onde ao colocar e tirar uma classe de um elemento pai os filhos são mostrados ou escondidos.

Abaixo um exemplo usando os métodos Element.classList.toggle() e Element.classList.contains() (docs);

const btn = document.getElementById('alternar')
const elementoPai = document.getElementById('elemento-pai')

btn.addEventListener('click', event => {
    elementoPai.classList.toggle('ativa')
})
#elemento-pai > .uma-div { display: block; }
#elemento-pai > .outra-div { display: none; }

#elemento-pai.ativa > .uma-div { display: none; }
#elemento-pai.ativa > .outra-div { display: block; }

.uma-div { background-color: tomato; }
.outra-div { background-color: gold; }
<button id="alternar">Alternar</button>
<hr>
<div id="elemento-pai">
  <div class="uma-div">Div 1</div>
  <div class="outra-div">Div 2</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

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