0

Quero que o javascript reconheça qual botão aperto, quando apertar botão A mostrar a div A , e quando apertar botão B mostrar a div B, as duas divs não podem aparecer em conjunto.

O código que estou fazendo no momento está assim:

<input type="button" id="A" required="" value="A" onclick="Mudarestado()"/>
<input type="button" id="B" required="" value="B" onclick="Mudarestado()"/>
    <div class="row" id="displayA" style="display:none;">
        <p>A</p>
    </div>
    <div class="row" id="displayB" style="display:none;">
        <p>B</p>
    </div>
</div>

<script>
    function Mudarestado(el) {
        var btn // deve receber o valor do botão A ou do botao B
        console.log(btn);
        if (btn == "A"{
            var display = document.getElementById('displayA').style.display;
            if(display == "none")
                document.getElementById('displayA').style.display = 'block';
            else
                document.getElementById('displayA').style.display = 'none';
        } if else ( btn == "B" ){
            var display = document.getElementById('displayB').style.display;
            if(display == "none")
                document.getElementById('displayB').style.display = 'block';
            else
                document.getElementById('displayB').style.display = 'none';
        }
    }
</script>

2 Respostas 2

0

Faça o seguinte passe o parametro dentro do onclick assim mudarestado("a") ou mudarestado("b"), repare que falta fexar o seu primeiro if também, e não usasse if else utilizasse else if

<input type="button" id="A" required="" value="A" onclick="Mudarestado('A')"/>
        <input type="button" id="B" required="" value="B" onclick="Mudarestado('B')"/>
                    <div class="row" id="displayA" style="display:none;">
                        <p>A</p>
                    </div>
                    <div class="row" id="displayB" style="display:none;">
                        <p>B</p>
                    </div>
                </div>

    <script>


   function Mudarestado(el) {
alert(el);
        if (el == "A"){
            var display = document.getElementById('displayA').style.display;
            if(display == "none")
                document.getElementById('displayA').style.display = 'block';
            else
                document.getElementById('displayA').style.display = 'none';
        } else if ( el == "B" ){
            var display = document.getElementById('displayB').style.display;
            if(display == "none")
                document.getElementById('displayB').style.display = 'block';
            else
                document.getElementById('displayB').style.display = 'none';
        }
    }
    </script>
0

Uma outra alternativa é iniciar a tela com um botão já "pressionado" e uma das divs visíveis. E a cada click nos botões, inverter o valor de display, ou utilizar as funções hide() e show() do JQuery para as divs.

Exemplo de código:

function Mudarestado(){
 if ($('#A').prop('style').display=='block')
 {
  $('#B').show();
  $('#A').hide();
 }
 else
{
  $('#A').show();
  $('#B').hide();
}
};
2

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 .