0

Currently, I have a code that keeps updating a list of "cards", during setup it applies this code to add an edit button that fires a universal modal:

$("#C" + cardID + "Edit").off('click').click(function() {
    editCard(cardID);
});

Where cardID is in a loop that sets every card, and goes from 1 to 5 for my cards (C1Edit, C2Edit, etc). I am using .off('click') as currently the same code that keeps the values updated adds the events to the buttons in the cards.

The function editCard() is as follows:

function editCard(id) {
    selectedCard = id;
    $("#cardEditName").val($("#C" + id + "T").html());
    $("#cardEditUnit").val($("#C" + id + "U").html());
}

The issue is, when I click on the button #C2Edit, I get an id of 5. Which means that somehow the function is trying to access the current value of cardID, instead of taking the value when button was created.

I am not really sure how to resolve this issue, or if there is something obvious that I missed (which I expect to be the case).

My loop:

for (element in result) {
   cardID = element;
   .
   .
   $("#C" + cardID + "Edit").off('click').click(function() {
    editCard(cardID);
   });
}

I know that my loop should work fine, as other fields that are set (I am setting a number of fields at once) are appearing correctly as far as I can see.

Zaid Al Shattle
  • 1,454
  • 1
  • 12
  • 21
  • SHOW YOUR LOOP. Has nothing to do with the editCard function. It has to do with the click function binding. – epascarello Oct 14 '21 at 14:13
  • https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – epascarello Oct 14 '21 at 14:13
  • So why are you using a global variable? `cardID` is global. Whatevery is in the click() is going to read that global variable when it is clicked. – epascarello Oct 14 '21 at 14:15
  • @epascarello which global variable? I am a bit confused here. Am I unintensionally using a global variable I shouldn't be using here? – Zaid Al Shattle Oct 14 '21 at 14:16
  • `editCard(cardID);` <-- reads the global variable. It does not hold the state of `cardID` at that moment it time. So it gets the last value of the for loop. – epascarello Oct 14 '21 at 14:17
  • I see, in that case, how do I store the current value for the function? Would an option like setting another variable to read the value of cardID work perhaps? – Zaid Al Shattle Oct 14 '21 at 14:18
  • Why is cardID global? Shove `var` or `const` in front of it. – epascarello Oct 14 '21 at 14:18
  • It isn't supposed to be global, but I guess it is a result of me not using let cardID; here? – Zaid Al Shattle Oct 14 '21 at 14:19
  • WHY is it global, it makes no sense. It will always be the last value in the loop. – epascarello Oct 14 '21 at 14:19
  • I use it in other locations in the loop, that's why its in the above context – Zaid Al Shattle Oct 14 '21 at 14:20
  • It is in the loop then it should still be declared with const or var. Global is for when you need access it to things outside the scope of the function. – epascarello Oct 14 '21 at 14:20
  • Using `var` didn't fix it, but using `let` and `const` did, do post that as an answer if you don't mind so I can accept it. Thanks for your help. I do have some things related to JS that I misunderstand. Apologies for the bother. – Zaid Al Shattle Oct 14 '21 at 14:21
  • To clairfy: `x = 1` without var/let/const auto-magically makes `x` a global variable no matter where `x=1` runs (assuming it hasn't been defined previously, of course). There's subtle differences between `var` and `let` but they don't work exactly like `var` in other languages such as c#. There's better places to explain the differences in more detail. – freedomn-m Oct 14 '21 at 14:44
  • Thank you @freedomn-m for the clarification, that makes sense. I will read up a bit more on that. – Zaid Al Shattle Oct 14 '21 at 14:45

0 Answers0