用Javascript循环，关闭和addEventListener

Question

I'm sorry for that not so specific title because my English is not good enough to describe this situation clearly in the title.

I have a code like this:

var e = document.getElementsByClassName( "test" );
var myFunc = function( e ) { 
  e = e + 1; 
};

for ( var i = 0, l = e.length; i < l; i++ ) {
    var t = e[ i ];
    var j = 0;
    (function( n, num ){
        num = 0;
        n.addEventListener("click", function() {
          myFunc( num );
          console.log( num )
        });
    }( t, j ));
}

My intention is to make variable j 's value to increase but the result I still get j=0 after everytime .test is clicked.

Demo

Answer 1

Your problem is that JavaScript does not pass primitive values (like numbers) by reference, but by value. The myFunc function must return something, you cannot assign to its arguments to change "outside" values.

Here's a more modern approach, based on the reasonable assumption that browsers that support getElementsByClassName() also support Array.prototype.forEach() .

The following creates one closure with num per HTML element.

 var elems = document.getElementsByClassName("test"), myFunc = function(e) { return e += 1; }; [].slice.call(elems).forEach(function (elem) { var num = 0; elem.addEventListener("click", function () { num = myFunc(num); this.textContent = this.textContent.replace(/\\d*$/, num); }); }); 

 <button class="test">Test 0</button> <button class="test">Test 0</button> <button class="test">Test 0</button> 

---

Javascript does pass objects by reference, so with a slight change this would work:

 var elems = document.getElementsByClassName("test"), myFunc = function(properties) { properties.num += 1; }; [].slice.call(elems).forEach(function (elem) { var properties = { num: 0 }; elem.addEventListener("click", function () { myFunc(properties); this.textContent = this.textContent.replace(/\\d*$/, properties.num); }); }); 

 <button class="test">Test 0</button> <button class="test">Test 0</button> <button class="test">Test 0</button>