This question already has answers here:
How to fix jslint error 'Don't make functions within a loop.'?
(6 answers)
Closed 8 years ago.
Im using the following code which works and my question how should I write it better,since when I use EsLint I got red message that saying that dont make function without loop,currently Im new to JS so I dont know how to do that better...
for (var i = 0; i < allChildren.length; i++) {
allChildren[i].attachChange(function(){
this.getChecked() ? nSelectedChildren+=1 : nSelectedChildren-=1;
if(nSelectedChildren === 0){
oParent.toggle("Unchecked");
}
else if(nSelectedChildren === allChildren.length){
oParent.toggle("Checked");
}
else{
oParent.toggle("Mixed");
}
}
);
What EsLint meant what it should be, i think, is:
function foo(){
this.getChecked() ? nSelectedChildren+=1 : nSelectedChildren-=1;
if(nSelectedChildren === 0){
oParent.toggle("Unchecked");
}
else if(nSelectedChildren === allChildren.length){
oParent.toggle("Checked");
}
else{
oParent.toggle("Mixed");
}
}
for (var i = 0; i < allChildren.length; i++) {
allChildren[i].attachChange(foo);
}
Don't define functions within loops
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 2 years ago.
I am adding some JS to an HTML, and I have a fragment of code similar to this:
<script>
function ButtonAction(index){
alert("My index is: "+index);
if(window_big){
// Use index to do something
}
else{
// Use index to do something else
}
}
function WindowResize(){
if(window.innerWidth > 1200){
window_big = true;
}
else{
window_big = false;
}
}
var window_big;
if(window.innerWidth > 1200){
window_big = true;
}
else{
window_big = false;
}
buttons = document.getElementsByClassName('MyButtons')
var i;
for (i = 0; i < buttons.length; i++) {
alert(i);
buttons[i].addEventListener("click",function(){ButtonAction(i);},false);
}
window.onresize = WindowResize;
</script>
The idea can be summarized like this:
There is a series of buttons in the page, stored in buttons[].
If the window is bigger than a certain size, those buttons should do one action, and if not, do another one.
To do said actions, I need the button[x].id. In fact, the initial intention was to set the listener to:
buttons[i].addEventListener("click",function(){ButtonAction(i);},false);
The problem is that I cannot retrieve the id, because the argument passed in the event listener seems to be always the last value i was set to.
May I ask for some help, please?
This question already has an answer here:
(infinite?) loop in javascript code
(1 answer)
Closed 5 years ago.
Right now I am really stumped. I have a short function, called "validate", and for some reason the for loop I have prevents an outer for loop from running.
Here it is breaking by only printing out the first entry:
function validate(str) {
for(i=0; i<str.length; i++) {
// do nothing
}
return str;
}
And here's the version that works:
function validate(str) {
/*for(i=0; i<str.length; i++) {
// do nothing
}*/
return str;
}
Here is my fiddle.
Here is the sample text file.
Try encapsulating your variable i. var i = 0;
function validate(str) {
for(var i = 0; i < str.length; i++) {
// do nothing
}
return str;
}
Without the var you are adding it to the global scope or the window object
This question already has answers here:
What's the best way to break from nested loops in JavaScript? [closed]
(18 answers)
Closed 5 years ago.
I'm try to break out of a double for loop, if a condition is true, my code doesnt work correctly. Anyone know how to do this?
for (var i = 0; i <eightPoints.length; i++)
{
for (var j = 0; j <eightPoints.length; j++)
{
....
....
if (bool == true)
{
calculateAndDisplayRoute(0);
//break; ??
}
}
//break; ??
}
Set i = eightPoints.length before break. I don't have any other idea to get out of two for-loops. Definitely break is not the solution as it can break out of only one loop.
This question already has answers here:
JSlint: unexpected 'for' [duplicate]
(2 answers)
Closed 7 years ago.
I'm new to JSLint and I'm trying to create function that outputs amount of elements specified in first argument. Normally I would use the for loop but JSLint doesn't like loops and complains about it.
I've searched the web looking for satisfying answer, but the only ones that I've found are with use of new Array or other way of outsmarting JSLint.
So, how to change this code to JSLint-friendly?
function createElements(amount) {
var i;
var elements = [];
for (i = 0; i < amount; i += 1) {
elements.push(document.createElement('div'));
}
return elements;
}
Try this code,
function createElements(amount, document) {
'use strict';
var i = 0;
var elements = [];
while (i < amount) {
i = i + 1;
elements.push(document.createElement('div'));
}
return elements;
}
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
guys, really need for your helps. I got some code block as follows:
function readyToSubmit(answerPack, answerArr, len) {
for (var i = 0; i < answerArr.length; i++) {
var questionId = answerArr[i].id;
console.log(questionId);
// below is an database async operation
userStore.getDoc(id).then(function(doc) {
// if I console.log 'answerArr[i]' here, it will be undefined
// I know it's 'cause the 'i' here is answerArr.length, so it would be undefined
// I want my questionId differently, but it is always the last one in the array
// I know it's the closure issue, but don't really know how to handle it.
doc.questionId = questionId; // always the same one
answerPack.push(doc);
});
}
}
So, how can I exactly get what I want in every round, I mean different questionId, not always the last one. Many many thanks, :)
You could so somethink like ,
function readyToSubmit(answerPack, answerArr, len) {
for (var i = 0; i < answerArr.length; i++) {
var questionId = answerArr[i].id;
doasynch(questionId);
}
}
function doasynch(questionId) {
userStore.getDoc(id).then(function (doc) {
doc.questionId = questionId;
answerPack.push(doc);
});
}
Read
How Closure works
Closure inside loop issue