如何将按钮文本更改为单击列表项的 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

如cmets所说的变化

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>

Answer 2

您正在监听点击事件，您可以使用该事件来识别该事件的触发位置。

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);

}