How to get the value of button A or B

0

I want javascript to recognize which button to press, when you press button A to show div A, and when you press button B show div B, the two divs may not appear together.

The code I'm currently doing is like this:

<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>
    
asked by anonymous 15.08.2017 / 19:40

2 answers

0

Do the following pass the parameter inside the onclick so change it ("a") or change status ("b"), notice that it's missing your first if too, and do not use if else use 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>
    
15.08.2017 / 19:44
0

Another alternative is to start the screen with a button already pressed and one of the divs visible. And each click on the buttons, invert the display value, or use the hide () and show () functions of JQuery for the divs.

Code sample:

function Mudarestado(){
 if ($('#A').prop('style').display=='block')
 {
  $('#B').show();
  $('#A').hide();
 }
 else
{
  $('#A').show();
  $('#B').hide();
}
};
    
15.08.2017 / 19:48