未定義はドロップダウンのオブジェクトではありません

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;私は++）のために...あなたが名前のグローバル変数を宣言しています私は、ループの終わりに値ddown.lengthを持ちます。したがって、valueChangeでは、常に同じ値になります

第2：iはddown.lengthに設定されます。つまり、配列に存在しない位置、つまりエラーが発生します。この問題を解決するには

、iがVARを使用して、ローカル変数として設定され、引数として渡す。

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

ノードとしてイテレータで使用される変数を追加するためのコードを変更属性、可変スコープの問題を修正する必要があります。