Javascript problem involving multiple scopes in closures

Question

Javascript problem involving multiple scopes in closures

What is the most effective solution for addressing this issue related to closure in JavaScript?

Here is a simple problem I am facing:

I have 10 spans with onclick events (I want an alert showing the number of the span clicked on each click):


var spans = document.getElementsByTagName('span');
function addEvents(divs) {
    for(var i=0; i < divs.length; i++) {
        divs[i].innerHTML = i;
        divs[i].onclick = function() { alert(i) };
    }
}
addEvents(spans);

You can also view the code in action on JSFiddle.

javascript closures

Answer 1

Answer №1

Enclose it within a self-invoking function:

buttons[i].onclick = (function(i) {
    return function() {
        console.log(i);
    };
})(i);

For brevity, set it as a callback:

var clickCallback = function(i) {
    return function() { console.log(i); };
};

buttons[i].onclick = clickCallback(i);

Answer 2

Enclose it within a self-invoking function:

buttons[i].onclick = (function(i) {
    return function() {
        console.log(i);
    };
})(i);

For brevity, set it as a callback:

var clickCallback = function(i) {
    return function() { console.log(i); };
};

buttons[i].onclick = clickCallback(i);

Javascript problem involving multiple scopes in closures

Answer №1

Similar questions

React Js month picker problem encountered

passport.authenticate method fails due to empty username and password values

How to Set Up a Simple Gulp Uglify Configuration

How can we bring in a function into a Vue component?

Continuously update scrolling functionality

What is the best way to transfer variables between two Vue files?

Building New Web Pages with Express in Node.JS

In PHP/HTML, if the URL is domain.co.uk/?debug, then the following action will

Is it feasible to cancel or clear the queue for a jQuery fadeOut function after a delay is specified? If so,

Custom time selector does not automatically set the default value

Navigating to a new page once a backend function in Express has finished executing

Fetching user feeds from Facebook with AngularJS is easier than you think

Identifying whether a Property in an Object is another Object

Twice the calls are being made by jQuery Ajax

The website encountered an error in loading with the error message "ENOTFOUND" in Cypress

A guide on calling a function from a different component in vuejs2

Tap and hold with Zepto

Automatically move to the latest message as soon as it is posted

Stopping npm private organization from releasing public packages

Guide to using Angular $resource to pass query parameter array