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

Question

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

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

我快接近了，但不知何故 current 变量仅 returns 最后一个列表项的 innerHTML。

那么我需要更改什么才能将单击的 li 的 innerHTML 作为按钮文本？

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>

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

}

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

How to change button text to innerHTML of clicked list item

javascript

click

innerhtml