How to add a “click” handler inside the “for” loop?
0
There is such a piece where how
$(document).on('click', '#calcA', function() {
$("#calcASum").addClass("field");
($(this).is(":checked")) ? $("#calcAInfo").css("display", "") : $("#calcAInfo").css("display", "none");
});
$(document).on('click', '#calcB', function() {
$("#calcBSum").addClass("field");
($(this).is(":checked")) ? $("#calcBInfo").css("display", "") : $("#calcBInfo").css("display", "none");
});
$(document).on('click', '#calcC', function() {
$("#calcCSum").addClass("field");
($(this).is(":checked")) ? $("#calcCInfo").css("display", "") : $("#calcCInfo").css("display", "none");
});
only AB and C changes;
I wanted to write through for ()
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
$(document).on('click', '#calc'+item[i], function() {
$("#calc"+item[i]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[i]+"Info").css("display", "") : $("#calc"+item[i]+"Info").css("display", "none");
});
}
he adds one more function after the click function. It turns out inside the function already i = 3. There are other solutions to this problem? thanx
jquery loops for-loop
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
add a comment |
0
There is such a piece where how
$(document).on('click', '#calcA', function() {
$("#calcASum").addClass("field");
($(this).is(":checked")) ? $("#calcAInfo").css("display", "") : $("#calcAInfo").css("display", "none");
});
$(document).on('click', '#calcB', function() {
$("#calcBSum").addClass("field");
($(this).is(":checked")) ? $("#calcBInfo").css("display", "") : $("#calcBInfo").css("display", "none");
});
$(document).on('click', '#calcC', function() {
$("#calcCSum").addClass("field");
($(this).is(":checked")) ? $("#calcCInfo").css("display", "") : $("#calcCInfo").css("display", "none");
});
only AB and C changes;
I wanted to write through for ()
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
$(document).on('click', '#calc'+item[i], function() {
$("#calc"+item[i]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[i]+"Info").css("display", "") : $("#calc"+item[i]+"Info").css("display", "none");
});
}
he adds one more function after the click function. It turns out inside the function already i = 3. There are other solutions to this problem? thanx
jquery loops for-loop
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
api.jquery.com/toggle
– freedomn-m
Nov 15 '18 at 8:51
The easiest solution is to not use IDs with semantic meaning. Use DOM traversal to find the related Sum/Info fields or pair them withdata-attributes.
– freedomn-m
Nov 15 '18 at 8:56
add a comment |
0
0
0
There is such a piece where how
$(document).on('click', '#calcA', function() {
$("#calcASum").addClass("field");
($(this).is(":checked")) ? $("#calcAInfo").css("display", "") : $("#calcAInfo").css("display", "none");
});
$(document).on('click', '#calcB', function() {
$("#calcBSum").addClass("field");
($(this).is(":checked")) ? $("#calcBInfo").css("display", "") : $("#calcBInfo").css("display", "none");
});
$(document).on('click', '#calcC', function() {
$("#calcCSum").addClass("field");
($(this).is(":checked")) ? $("#calcCInfo").css("display", "") : $("#calcCInfo").css("display", "none");
});
only AB and C changes;
I wanted to write through for ()
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
$(document).on('click', '#calc'+item[i], function() {
$("#calc"+item[i]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[i]+"Info").css("display", "") : $("#calc"+item[i]+"Info").css("display", "none");
});
}
he adds one more function after the click function. It turns out inside the function already i = 3. There are other solutions to this problem? thanx
jquery loops for-loop
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
There is such a piece where how
$(document).on('click', '#calcA', function() {
$("#calcASum").addClass("field");
($(this).is(":checked")) ? $("#calcAInfo").css("display", "") : $("#calcAInfo").css("display", "none");
});
$(document).on('click', '#calcB', function() {
$("#calcBSum").addClass("field");
($(this).is(":checked")) ? $("#calcBInfo").css("display", "") : $("#calcBInfo").css("display", "none");
});
$(document).on('click', '#calcC', function() {
$("#calcCSum").addClass("field");
($(this).is(":checked")) ? $("#calcCInfo").css("display", "") : $("#calcCInfo").css("display", "none");
});
only AB and C changes;
I wanted to write through for ()
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
$(document).on('click', '#calc'+item[i], function() {
$("#calc"+item[i]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[i]+"Info").css("display", "") : $("#calc"+item[i]+"Info").css("display", "none");
});
}
he adds one more function after the click function. It turns out inside the function already i = 3. There are other solutions to this problem? thanx
jquery loops for-loop
jquery loops for-loop
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
asked Nov 15 '18 at 8:34
Гани ШахмуратГани Шахмурат
74
74
api.jquery.com/toggle
– freedomn-m
Nov 15 '18 at 8:51
The easiest solution is to not use IDs with semantic meaning. Use DOM traversal to find the related Sum/Info fields or pair them withdata-attributes.
– freedomn-m
Nov 15 '18 at 8:56
add a comment |
api.jquery.com/toggle
– freedomn-m
Nov 15 '18 at 8:51
The easiest solution is to not use IDs with semantic meaning. Use DOM traversal to find the related Sum/Info fields or pair them withdata-attributes.
– freedomn-m
Nov 15 '18 at 8:56
api.jquery.com/toggle
– freedomn-m
Nov 15 '18 at 8:51
api.jquery.com/toggle
– freedomn-m
Nov 15 '18 at 8:51
The easiest solution is to not use IDs with semantic meaning. Use DOM traversal to find the related Sum/Info fields or pair them with
data- attributes.– freedomn-m
Nov 15 '18 at 8:56
The easiest solution is to not use IDs with semantic meaning. Use DOM traversal to find the related Sum/Info fields or pair them with
data- attributes.– freedomn-m
Nov 15 '18 at 8:56
add a comment |
1 Answer
1
active
oldest
votes
1
The fact is that you are referencing an outer scoped variable.
You can have a look at this question: Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. What is wrong?
And in your case you can try this code :
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
const j = i;
$(document).on('click', '#calc'+item[j], function() {
$("#calc"+item[j]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[j]+"Info").css("display", "") : $("#calc"+item[j]+"Info").css("display", "none");
});
}
answered Nov 15 '18 at 8:48
BertrandBertrand
261
It's not so much that it's an "outer scoped variable" - it's that the click event occurs after the for loop has completed, so the value ofihas already changed by the time you click. Have a good read of this: stackoverflow.com/questions/111102/…
– freedomn-m
Nov 15 '18 at 8:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53315259%2fhow-to-add-a-click-handler-inside-the-for-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The fact is that you are referencing an outer scoped variable.
You can have a look at this question: Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. What is wrong?
And in your case you can try this code :
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
const j = i;
$(document).on('click', '#calc'+item[j], function() {
$("#calc"+item[j]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[j]+"Info").css("display", "") : $("#calc"+item[j]+"Info").css("display", "none");
});
}
answered Nov 15 '18 at 8:48
BertrandBertrand
261
It's not so much that it's an "outer scoped variable" - it's that the click event occurs after the for loop has completed, so the value ofihas already changed by the time you click. Have a good read of this: stackoverflow.com/questions/111102/…
– freedomn-m
Nov 15 '18 at 8:54
add a comment |
1
The fact is that you are referencing an outer scoped variable.
You can have a look at this question: Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. What is wrong?
And in your case you can try this code :
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
const j = i;
$(document).on('click', '#calc'+item[j], function() {
$("#calc"+item[j]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[j]+"Info").css("display", "") : $("#calc"+item[j]+"Info").css("display", "none");
});
}
answered Nov 15 '18 at 8:48
BertrandBertrand
261
It's not so much that it's an "outer scoped variable" - it's that the click event occurs after the for loop has completed, so the value ofihas already changed by the time you click. Have a good read of this: stackoverflow.com/questions/111102/…
– freedomn-m
Nov 15 '18 at 8:54
add a comment |
1
1
1
The fact is that you are referencing an outer scoped variable.
You can have a look at this question: Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. What is wrong?
And in your case you can try this code :
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
const j = i;
$(document).on('click', '#calc'+item[j], function() {
$("#calc"+item[j]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[j]+"Info").css("display", "") : $("#calc"+item[j]+"Info").css("display", "none");
});
}
answered Nov 15 '18 at 8:48
BertrandBertrand
261
The fact is that you are referencing an outer scoped variable.
You can have a look at this question: Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. What is wrong?
And in your case you can try this code :
var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
const j = i;
$(document).on('click', '#calc'+item[j], function() {
$("#calc"+item[j]+"Sum").addClass("field");
($(this).is(":checked")) ? $("#calc"+item[j]+"Info").css("display", "") : $("#calc"+item[j]+"Info").css("display", "none");
});
}
answered Nov 15 '18 at 8:48
BertrandBertrand
261
answered Nov 15 '18 at 8:48
BertrandBertrand
261
answered Nov 15 '18 at 8:48
BertrandBertrand
261
answered Nov 15 '18 at 8:48
BertrandBertrand
261
261
It's not so much that it's an "outer scoped variable" - it's that the click event occurs after the for loop has completed, so the value ofihas already changed by the time you click. Have a good read of this: stackoverflow.com/questions/111102/…
– freedomn-m
Nov 15 '18 at 8:54
add a comment |
It's not so much that it's an "outer scoped variable" - it's that the click event occurs after the for loop has completed, so the value ofihas already changed by the time you click. Have a good read of this: stackoverflow.com/questions/111102/…
– freedomn-m
Nov 15 '18 at 8:54
It's not so much that it's an "outer scoped variable" - it's that the click event occurs after the for loop has completed, so the value of
i has already changed by the time you click. Have a good read of this: stackoverflow.com/questions/111102/…– freedomn-m
Nov 15 '18 at 8:54
It's not so much that it's an "outer scoped variable" - it's that the click event occurs after the for loop has completed, so the value of
i has already changed by the time you click. Have a good read of this: stackoverflow.com/questions/111102/…– freedomn-m
Nov 15 '18 at 8:54
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53315259%2fhow-to-add-a-click-handler-inside-the-for-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
api.jquery.com/toggle
– freedomn-m
Nov 15 '18 at 8:51
The easiest solution is to not use IDs with semantic meaning. Use DOM traversal to find the related Sum/Info fields or pair them with
data-attributes.– freedomn-m
Nov 15 '18 at 8:56