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>
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>
3 Answers
Reset to default 4I 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.
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.
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.