Undefined не является объектом в Dropdown

Question

Я хочу, чтобы мой код показывал меню, добавив класс slactive и изменив значение ввода из коллекции ddown. У меня есть код, который не работает, поскольку консоль говорит, что в строке 9 или ddown[i], а также slitems[j] - объекты, поскольку они не определены. Как это исправить?

var slitems = document.getElementsByClassName('slitem'); 
    ddown = document.getElementsByClassName('ddown'); 
for(i=0; i<ddown.length; i++) { 
    ddown[i].addEventListener('click', function(){document.getElementById('sl'+i).classList.add('slactive');valueChange()}); 
} 
function valueChange(){ 
    for(j=0;j<slitems.length;j++){ 
     slitems[j].addEventListener('click', function(){ 
      ddown[i].value = slitems[j].value; 
      document.getElementById('sl'+i).classList.remove('slactive'); 
     }); 
    } 
} 

P.S. slitems представляет собой набор элементов меню.

Answer 1

Посмотрите, что вы делаете, имеет по крайней мере два недостатка:

первый: при этом: для (I = 0; я < ddown.length, я ++) ... вы объявляете глобальную переменную с именем i, что в конце цикла будет иметь значение ddown.length; так что в valueChange он всегда будет иметь такое же значение

2nd: i установлено значение ddown.length, то есть позиция, которая не существует в массиве, следовательно, полученная вами ошибка.

Чтобы исправить это, я ставил в качестве локальной переменной, используя вар, и передать его в качестве аргумента:

var slitems = document.getElementsByClassName('slitem'); 
    ddown = document.getElementsByClassName('ddown'); 
for(var i=0; i<ddown.length; i++) { 
    ddown[i].setAttribute("data-index", i); 
    ddown[i].addEventListener('click', function(e){ 
     var i = e.target.dataset.index; 
     document.getElementById('sl'+i).classList.add('slactive');valueChange(i) 
    }); 
} 
function valueChange(i){ 
    for(var j=0;j<slitems.length;j++){ 
     slitems[j].setAttribute("data-index", j); 
     slitems[j].setAttribute("data-index2", i); 
     slitems[j].addEventListener('click', function(e){ 
      var j = e.target.dataset.index; 
      var i = e.target.dataset.index2; 
      ddown[i].value = slitems[j].value; 
      document.getElementById('sl'+i).classList.remove('slactive'); 
     }); 
    } 
} 

EDIT

Изменен код для добавления переменных, используемых в итераторы как узел атрибуты, что должно исправить проблему с переменной областью.