Невозможно прочитать свойство 'addEventListener' of undefined

Question

function asign(id){ 

return document.getElementById(id) ; 
} 
var b = ['p','q','r','s','t','u','v']; 
var a = ['fname','lname','email','password','r_password','g_m',"g_f"] ; 

for (i=0;i<a.length;i++) { 
     var x = {} ; 
    x[b[i]] = asign(a[i]) ; 
     x[i].addEventListener('click', function() { alert(x[i].value) ;} ,false) ; 

} 

Я хочу, чтобы просто массив переменных и идентификаторов присваивался им в цикле.

Answer 1

Ожидается, что x[i] вернет элемент DOM, который вы только что сохранили, но вы храните элемент DOM в x[b[i]], а не x[i]. Будьте последовательны, и эта ошибка исчезнет.

код еще не будет работать, хотя, потому что вы падаете в ловушку закрытия: Когда происходит щелчок, обработчик события будет использовать i, как это тогда, а не как это было, когда обработчик был создано. Таким образом, все обработчики будут видеть i как a.length и терпят неудачу.

Я обычно использую функцию строителя, чтобы справиться с этим:

for (i = 0; i < a.length; i++) { 
    var x = {}; 
    x[b[i]] = asign(a[i]); 
    hookUp(i); 
} 
function hookUp(index) { 
    x[b[index]].addEventListener('click', function() { 
     alert(x[b[index]].value); 
    }, false); 
} 

hookUp использует index (который мы не меняем), а не i. (Я также принял предположение, при котором использовать, x[i] или x[b[i]].)

Тем не менее, если ваша цель состоит в том, чтобы предупредить value элемента, которая была нажата, используйте this вместо:

for (i = 0; i < a.length; i++) { 
    var x = {}; 
    x[b[i]] = asign(a[i]); 
    x[b[i]].addEventListener('click', function() { 
     alert(this.value); 
    }, false); 
} 

или Event#currentTarget:

for (i = 0; i < a.length; i++) { 
    var x = {}; 
    x[b[i]] = asign(a[i]); 
    x[b[i]].addEventListener('click', function(e) { 
     alert(e.currentTarget.value); 
    }, false); 
} 

Answer 2

function asign(id){ 
 

 
    return document.getElementById(id) ; 
 
    } 
 
    var a = ['a','b','c']; 
 
    var b = ['fname','lname','email'] ; 
 

 
    for (i=0;i<a.length;i++) { 
 
     (function(i){ 
 
     var x = {} ; 
 
     x[b[i]] = asign(a[i]) ; 
 
     x[b[i]].addEventListener('click', function() { alert(i+1) ;} ,false) ; 
 
     })(i); 
 

 
    }

<div id="a">Div 1</div> 
 
<div id="b">Div 2</div> 
 
<div id="c">Div 3</div>