How to take the value of the A or B button

Asked

Viewed 661 times

0

I want javascript to recognize which button I press, when I press button A to show div A , and when I press button B to show div B, the two Divs cannot appear together.

The code I’m making right now 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>
javascript html

2 answers

0


Do the following pass the parameter inside the onclick thus changing state("a") or changing state("b"), note that your first if is missing as well, and do not use if Else used if 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

Another alternative is to start the screen with an already "pressed" button and one of the visible Ivs. And every time you click on the buttons, invert the display value, or use Jquery’s Hide() and show() functions for the Divs.

Code example:

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

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.