i am working on a GreaseMonkey userscript this is the rough structure of my code, with some hard-coded example values:

<a href="#" id="test">test</a>
<script type="text/javascript">
  SomeOtherFunction = function(id) {
    alert(id)
  }
  var i = 0;
  { //this is actually in a for-loop
    var button = document.getElementById('test');
    button.addEventListener('click', function(){SomeOtherFunction(i)}, false);
    //as the loop iterates i gets changed,
    i = 1;
  }
</script>

result:
when i now click on the element "someOtherFunction" gets called with an "i" = 1

expected result:
"someOtherFunction" should be called with "i" = 0

//edit: i reduced the problem to this: http://pastebin.com/2NXCWBY8

any ideas?

  • full source code: http://pastebin.com/GMieerdw tkSimon over 6 years ago

3 answers

1
point
This was chosen as the best answer

i found an answer to my question at stackoverflow.com

Answered over 6 years ago by tkSimon
0
points

Hmm that doesn't quite make sense. I've just tested with:

<script type="text/javascript">
function test() {
    var i = 0;
    alert(i);
    i = 1;
    alert(i);
}
</script>
<a href="#" onclick="test();">test</a>

And I get a message box displaying 0, then 1 which is the expected result. Can you show the entire code?

Answered over 6 years ago by Marko Ivanovski
  • well.. you really wouldn't be that happy with my code, i promise the situation is this: this is code from a greasemonkey userscript. it adds elements to several rows in a table, which will be assigned IDs, and adds the onclick event listener to them when the user clicks them, a function should be called with the respective ID as argument <a href="#" id="test">test</a> <script type="text/javascript"> SomeOtherFunction = function(id) { alert(id) } var i = 0; { //this is actually in a for-loop var button = document.getElementById('test'); button.addEventListener('click', function(){SomeOtherFunction(i)}, false); //as the loop iterates i gets changed, i = 1; } </script> the for-loop iterated approx 200 elements, and thats the problem... as it iterates "i" gets changed and somehow also changes inside the anonymous function tkSimon over 6 years ago
  • Haha we all have our moments when writing code so don't be shy about posting your code. I'm gonna assume that the problem is related to the for loop and the "i" being incremented before the first function is called. Try setting "var i = -1" and see what happens, that should tell you if it's the loop that's causing the issue. Marko Ivanovski over 6 years ago
  • i added alert(i)'s before and after the addEventListener call. the values are correct. and sorry for the bad formatting in my last comment. i didn't know that you can't make line breaks in here. p.s.: i updated the code in my question to reflect a bit more detail. if dare to, you can see all of my code here: http://pastebin.com/RRM5Kh5b The event listener is added on line 303. tkSimon over 6 years ago
  • sorry for the broken link. update: http://pastebin.com/GMieerdw tkSimon over 6 years ago
  • So you're saying the values are correct when you do alert(i)? What's the issue then? Marko Ivanovski over 6 years ago
  • the values are correct right before and after the addEventListener call. so they _must_ be correct when the anonymous function is declared. but when the event is fired the values are screwed... tkSimon over 6 years ago
  • Hmm I'm running out of ideas, have you tested the behavior in different browsers? Will a dirty fix like rr_download_start(i-1,this) affect anything else? Sorry I can't be more helpful - you could also try stackoverflow.com - they have a lot more programmers available. Marko Ivanovski over 6 years ago
  • thanks for the tip. also, i reduced the problem to this: http://pastebin.com/2NXCWBY8 tkSimon over 6 years ago
0
points

i appears to be a global and you're also creating a closure around it when you define your anonymous function for the click handler.

It's impossible to tell what changes you need to make to get the desired behavior without the actual code.

Answered over 6 years ago by Nathan Duran
  • see http://doctype.com/js-variable-anonymous-function-inherited-from-parent-scope-chages-when-changed-parent-scope#comment_4072 tkSimon over 6 years ago
  • Yup, i's value is bound at the point that you create the function that is passed off to addEventListener. Re-read the documentation on JavaScript closures for all the common gotchas like this. Nathan Duran over 6 years ago