How to fix JSHint "Don't make functions within a loop" (loopfunc rule) warning?

Question

	<button id="rock" class="tools">Rock</button>
	<button id="paper" class="tools">Paper</button>
	<button id="scissor" class="tools">Scissor</button>

I am trying to get a random button id name and has the following codes

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;

for(var i = 0; i < buttonsCount; i++) {
	buttons[i].onclick = function() {
		console.log(this.id);
	};	
}

But the JSHint validator says Don't make functions within a loop. (http://jshint.com/docs/options/#loopfunc)

Please note that I want to fix this in plain JavaScript (no other frameworks). Does anyone here know how I get this done?

Community · Accepted Answer · 2017-05-23 10:30:11Z

1

The warning is trying to prevent you from running into problems like JavaScript closure inside loops – simple practical example (which is so common it has about 1800 duplicates or related questions on SO alone).

Fortunately your actual code is not affected by this problem, which means we can pull the function out of the loop. This also fixes the JSHint warning:

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
var handler = function () {
    console.log(this.id);
};

for (var i = 0; i < buttonsCount; i++) {
    buttons[i].onclick = handler;
}

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Mar 25, 2017 at 11:10

melpomene

86.2k8 gold badges97 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar V · Accepted Answer · 2017-03-25 10:50:17Z

0

i<=buttonsCount should be i<buttonsCount

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;

for(var i = 0; i < buttonsCount; i++) {
    buttons[i].onclick = function() {
        console.log(this.id);
    }   
}

answered Mar 25, 2017 at 10:50

Sagar V

12.5k8 gold badges46 silver badges71 bronze badges

1 Comment

Kyll Over a year ago

How does this address OP's "function in loop" issue? Also, an edit has made your answer invalid.

Collectives™ on Stack Overflow

How to fix JSHint "Don't make functions within a loop" (loopfunc rule) warning?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related