javascript: toggle event listener with onclick

Question

I have this JS function which I'm trying to toggle on and off when clicked on the object with the myFunc() function on it. The trouble I'm having is that by the time the code reaches the first if(myVar)/else part and tries to do the handler it has already switched the myVar variable to false. What should I change to correct my logic error?

    <script type="text/javascript">
        var myVar = true;
        function myFunc(myElement) {
            var ele = myElement;

            var myHandler = function(event) {
                if(myVar) {
                    // do something 
                } else {
                    // do something else 
                }
            }

            if(myVar) {
                window.addEventListener('mousemove', myHandler, false);
                myVar = false;
            } else {
                window.removeEventListener('mousemove', myHandler, false);
                myVar = true;
            }
        }
    </script>

...

<body>
    <div id="div1" onclick="myFunc(this)"></div>
</body>

julien · Accepted Answer · 2018-03-02 12:16:46Z

4

I think this is what you are looking for:

var myVar = false;

function myHandler(event) {
  if (myVar) {
    console.log('do something');
  }
}

function myFunc(myElement) {
  var ele = myElement;

  myVar = !myVar;
  if (myVar) {
    window.addEventListener('mousemove', myHandler, false);
  } else {
    window.removeEventListener('mousemove', myHandler, false);
  }
}

<button onclick="myFunc(this)">click me</button>

Tell me if there is something you're not understanding in this code.

answered Mar 2, 2018 at 12:16

julien

882 silver badges8 bronze badges

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

1 Comment

lowxkey Over a year ago

a little bit modified version of this worked, thanks!

Levi Rocha · Accepted Answer · 2018-03-02 11:19:33Z

0

Why does myHandler need to check the value of myVar? According to your logic, myVar will always be false when myHandler runs, because you're always setting it to false when you add the event listener. myVar will only ever be set to true when you remove the event listener, so myHandler will never run when myVar is true.

You can remove the if(myVar)/else from myHandler since myVar will always be false there.

answered Mar 2, 2018 at 11:19

Levi Rocha

883 bronze badges

7 Comments

lowxkey Over a year ago

myVar changes value when clicked. When JS loads it starts out as true, onclick it changes to false, when clicked again true etc etc. I know that the myHandler runs even when myVar is false because the code inside of it executes. The problem is the code does opposite what from what I want: it skips the first click(doesnt do anything except change the myVar value), it then runs false code block when myVar is true, true code block when myVar is false.

Levi Rocha Over a year ago

If you just want it to do the opposite of what it's doing, change the check to if(!myVar)

lowxkey Over a year ago

It works that way but I feel like this still isn't the correct way of doing it because it should add the event listener and do the first myHandler part when myVar is true, but I guess I will stick to that if I can't find any better way to solve it. The myHandler variable function is one step behind, and the problems arise when I add more divs which use the same onclick event.

Levi Rocha Over a year ago

If you want myVar to be false only after the first myHandler run, set it to false inside myHandler after it checks myVar, not after you add the eventHandler.

lowxkey Over a year ago

It will be in an endless loop of setting the value to true/false then, and does not work properly that way either. As I said, the myHandler variable function is one step behind, and the problems arise when I add more divs which use the same onclick event.

|

Nadun · Accepted Answer · 2018-03-02 11:30:54Z

0

you can achieve this by 2 methods

method 1:

<body>
    <div id="div1">div</div>
</body>

<script type="text/javascript">
        var myVar = false;
        var myHandler = function() {
                myVar = !myVar;
        }
        document.getElementById('div1').addEventListener('click', myHandler);
</script>

method2:

<body>
    <div onClick="myHandler()">div</div>
</body>
<script type="text/javascript">
        var myVar = false;
        var myHandler = function() {
          myVar = !myVar;
        }
</script>

hope you have found what you are looking for.

answered Mar 2, 2018 at 11:30

Nadun

7,8731 gold badge24 silver badges28 bronze badges

1 Comment

lowxkey Over a year ago

This doesn't work because it isn't the handler which is adding the mousemove event to window, it's the myFunc function. The problem I'm currently having is it seems like the myHandler var is one loop behind, which means it starts functioning after the second click on the div. I could change the myVar to false in myHandler but that is only a short term workaround, as when I decide to add more divs which use the same function things get really messy.

Collectives™ on Stack Overflow

javascript: toggle event listener with onclick

3 Answers 3

1 Comment

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related