How to toggle between functions on button click

Question

I have a button that I want to switch between 2 different functions when clicked. like first click would call function A, second click would call function B, Third Click would call function A etc.

for html I have something like this:

<input type="image"onclick="test()">

for javascript I have:

<script>
val = 1;
function test () {

    if (val = 1 ) {
    function1 ();
}
    else {
    function2 ();}
}
</script>

<script>
function function1() {
alert("1");
val = 2;}
</script>

<script>
function function2() {
alert("2");
val = 1;}
</script>

it only ever runs function1 Even if I set val = 2 it will run function1. any idea what im doing wrong?

Looking at the code your comparison operator is always assigning the value of 1. The comparison should have a== rather than a single =. if val == 1 — Craig
– Craig, Commented Aug 23, 2016 at 2:15

Tim Biegeleisen · Accepted Answer · 2016-08-23 01:46:03Z

2

You were using the assignment operator to check the value. Use the equality operator instead:

<script>
val = 1;
function test () {
    if (val == 1 ) {  // compare values using == (or maybe ===)
        function1();
        val = 2;      // use the assignment operator here
    }
    else {
        function2();
        val = 1;
    }
}
</script>

Update:

As @nnnnnn pointed out, you might want to update your toggle state inside test() directly.

edited Aug 23, 2016 at 1:46

answered Aug 23, 2016 at 1:31

Tim Biegeleisen

526k32 gold badges324 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nnnnnn Over a year ago

It would also make more sense (to me, anyway) to update val inside test() rather than inside function1() and function2() - keep all the control logic in one place. (Simpler even with only those two functions, and much simpler if a function3(), etc., needed to be added later.) (Sorry for deleting and reposting my comment.)

John · Accepted Answer · 2016-08-23 02:05:40Z

1

If you need only toggle button, you can try XOR style function.

<script>
    val = 0;
    function toggle(){
        val = val ^ 1; // XOR 0^1 => 1, 1^1 => 0
        if(val == 0){
          //do something
        }else{
          //do something else
        }
    }
</script>

OR in shorter way

<script>
    val = 0;
    function toggle(){
        val = val ^ 1; // XOR 0^1 => 1, 1^1 => 0
        val == 0 ? function1(): function2();
    }
</script>

answered Aug 23, 2016 at 2:05

John

3,5951 gold badge21 silver badges29 bronze badges

3 Comments

James McClain Over a year ago

Got it working now. I will check out the way you're suggesting. I'm sure there's better ways to do everything I'm trying to do, have pretty much no experience with JavaScript lol. Appreciate the help everyone!

James McClain Over a year ago

Let me ask you though, if val has a value of either 1 or 0 before toggle() is run why is val = val ^ 1; needed? Wouldn't it work the same way with out it?

John Over a year ago

Top "val" is global value which is alway 0. Then "val ^ 1" means always "0 ^ 1". Thus after toggle "val" number from 0 to 1 and assign to "val" global variable. Then your browser remember changed "val" value for next time. After first click, global "val" is 1 and "val ^ 1" means "1 ^ 1"

Collectives™ on Stack Overflow

How to toggle between functions on button click

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest