How to make button with two functions using if else statement

Question

I'm trying to make one button that has two functions whether it has class in it or not when clicked. So I tried to make javascript code using if else statement. I don't see what the problem is, but the button is not working..

$(document).ready(function() {
  $(".btn-ctrl").click(function() {
    if ($(".btn-ctrl > span").hasClass("close")) {
      function popDown() {
        $("#banner").slideDown(400);
        $(".btn-ctrl > span").removeClass("close");
      }
    } else {
      function popUp() {
        $("#banner").slideUp(400);
        $(".btn-ctrl > span").addClass("close");
      }
    }
  })
})

.btn-ctrl is class name for my button and I'm changing the button's design by adding and removing class="close" in span tag. I can't figure out what is causing problem

Extract popUp and popDown functions from your event and call them in your if / else statement. If it doesn't work can you post your HTML ? — Ichinator
– Ichinator, Commented Aug 11, 2021 at 13:24
<button type="button" class="btn-ctrl"><span>POPUP</span> this is my html code for the button — zeze
– zeze, Commented Aug 11, 2021 at 13:26

ByCodeXp · Accepted Answer · 2021-08-11 13:24:30Z

You create functions inside the condition instead of calling them. Blame functions outside the condition block and then call them or remove them altogether. And before you write anything, read the syntax of the language.

$(document).ready(function() {
    $(".btn-ctrl").click(function() {
        console.log('click')
        if ($(".btn-ctrl > span").hasClass("close")) {
            $("#banner").slideDown(400);
            $(".btn-ctrl > span").removeClass("close");
        } else {
            $("#banner").slideUp(400);
            $(".btn-ctrl > span").addClass("close");
        }
    })
})

or

function popDown() {
    $("#banner").slideDown(400);
    $(".btn-ctrl > span").removeClass("close");
}
function popUp() {
    $("#banner").slideUp(400);
    $(".btn-ctrl > span").addClass("close");
}

$(document).ready(function() {
    $(".btn-ctrl").click(function() {
        console.log('click')
        if ($(".btn-ctrl > span").hasClass("close")) {
            popDown();
        } else {
            popUp();
        }
    })
})

Collectives™ on Stack Overflow

How to make button with two functions using if else statement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related