javascript - 如何将按钮文本更改为单击列表项的 innerHTML

Question

我一直在搜索，但我找到的都是 JQuery 答案，我正在寻找一个普通的 JS 解决方案。

当单击列表项时，我希望按钮文本更改为被单击的 li 的 innerHTML。

我快接近了，但不知何故 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 = current.innerHTML;

到

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>