ボタンのテキストをクリックしたリストの項目のinnerHTMLに変更する方法

Question

私は検索してきましたが、私が見つけたのはJQueryの回答です。私はバニラのJSソリューションを探しています。

リストアイテムがクリックされたとき、ボタンのテキストをのliに変更します。

私は近づいていますが、どういうわけかcurrent変数は最後のリスト項目のinnerHTMLを返します。

ボタンのテキストとしてliをクリックすると、innerHTMLを変更するにはどうすればよいですか？

JS-Fiddle here

var clickHandler = function() { 
 

 
    document.getElementById('dropbtn').innerHTML = current.innerHTML; 
 

 
}; 
 

 
var dropdown = document.getElementById('dropdown'); 
 
var filterItem = dropdown.getElementsByTagName('LI') 
 

 
for (var i = 0; i < filterItem.length; i++) { 
 
    var current = filterItem[i]; 
 
    current.addEventListener('click', clickHandler, false); 
 

 
}

<div class="dropdown"> 
 
    <a id="dropbtn">Menu</a> 
 
    <ul id="dropdown" class="dropdown-content"> 
 
    <li>ALL</li> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    </ul> 
 
</div>

私は明確なものを維持するために、このドロップダウンのCSSを切り出します。

Answer 1

コメントで述べたように、あなたがクリックイベントにあなたを聞いている

document.getElementById('dropbtn').innerHTML = event.target.innerHTML; 

var clickHandler = function() { 
 

 
    document.getElementById('dropbtn').innerHTML = event.target.innerHTML; 
 

 
}; 
 

 
var dropdown = document.getElementById('dropdown'); 
 
var filterItem = dropdown.getElementsByTagName('LI') 
 

 
for (var i = 0; i < filterItem.length; i++) { 
 
    var current = filterItem[i]; 
 
    current.addEventListener('click', clickHandler, false); 
 

 
}

<div class="dropdown"> 
 
    <a id="dropbtn">Menu</a> 
 
    <ul id="dropdown" class="dropdown-content"> 
 
    <li>ALL</li> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    </ul> 
 
</div>

Answer 2

に

document.getElementById('dropbtn').innerHTML = current.innerHTML; 

を変更、あなたはにそのイベントを使用することができますそのイベントがどこで発生したかを特定するd。

var clickHandler = function(e) { 

    document.getElementById('dropbtn').innerHTML = e.target.innerHTML 

}; 

var dropdown = document.getElementById('dropdown'); 
var filterItem = dropdown.getElementsByTagName('li') 
console.log(filterItem) 

for (var i = 0; i < filterItem.length; i++) { 
    var current = filterItem[i]; 
    current.addEventListener('click', clickHandler, false); 

}