Changing value of global variable in sub local function javascript

Question

There is no need the explain most of this code. As you can see the global variable cancel is set to true. Then a function is called in which the variable cancel is changed. It seems as though I can access the cancel variable on lines 15, 27, or 32. Can you explain why it doesn't work and how I can fix it? Thank you! Please ask any additional questions. I didn't explain the other code here because I don't think it pertains to the question directly and it would make this question too long to read if I were.

1. var cancel = 'true';
2. function setSliders()
3. {
4.  var sliders = document.getElementsByClassName('slider');
5.  var sliderButtons = document.getElementsByClassName('sliderButton');
6.  for(var i = 0; i != sliderButtons.length; i++)
7.  {
8.      var slider = document.getElementsByClassName('sliderButton')[i];
9.      slider.onmousedown = function()
10.     {
11.         cancel = 'false';
12.         this.onmouseup = function(cancel)
13.         {
14.             cancel = 'true';
15.             alert(cancel +' within semi function cancel does not seem to be accessible here');
16.             //alert('test');
17.         };
18.         
19.         alert(cancel+' within function');
20.         
21.         this.onmousemove = function(event, cancel)
22.         {
23.             if(cancel == 'false')
24.             {
25.                 console.log('cancel is false'); //cancel doesn't seem to be accessible here either.
26.                 this.style.left = event.clientX+'px';
27.                 cancel = 'true';
28.             }
29.             else
30.             {
31.                 console.log('cancel is true'); //cancel isn't accessible here either.
32.                 cancel = 'false';
33.             }
34.         };
35.     };

Answer 1

You have cancel as argument name to your functions, making cancel within those functions be local to that function.

If you remove cancel from the arguments, it will reference the global cancel variable and should work.

 1. var cancel = 'true'; 2. function setSliders() 3. { 4. var sliders = document.getElementsByClassName('slider'); 5. var sliderButtons = document.getElementsByClassName('sliderButton'); 6. for(var i = 0; i != sliderButtons.length; i++) 7. { 8. var slider = document.getElementsByClassName('sliderButton')[i]; 9. slider.onmousedown = function() 10. { 11. cancel = 'false'; 12. this.onmouseup = function() 13. { 14. cancel = 'true'; 15. alert(cancel +' within semi function cancel does not seem to be accessible here'); 16. //alert('test'); 17. }; 18. 19. alert(cancel+' within function'); 20. 21. this.onmousemove = function(event) 22. { 23. if(cancel == 'false') 24. { 25. console.log('cancel is false'); //cancel doesn't seem to be accessible here either. 26. this.style.left = event.clientX+'px'; 27. cancel = 'true'; 28. } 29. else 30. { 31. console.log('cancel is true'); //cancel isn't accessible here either. 32. cancel = 'false'; 33. } 34. }; 35. };