Wie man Knopftext zu innerHTML von geklicktem Listenpunkt ändert

Question

Ich habe gesucht, aber alle, die ich finde, sind JQuery Antworten, ich suche nach einer Vanille JS Lösung.

Wenn ein Listenelement angeklickt wird, möchte ich, dass der Text der Schaltfläche in die innerHTML der angeklickte li geändert wird.

Ich bin nah dran, aber die current Variable gibt nur die innerHTML des letzten Listenelements zurück.

Also was muss ich ändern, um die innerHTML der angeklickt li als Schaltfläche Text zu bekommen?

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>

schneide ich die CSS dieser Drop-Down-out Dinge klar zu halten.

Answer 1

Wie bereits erwähnt in den Kommentare

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

Um

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

Du Dich auf ein Click-Ereignis hören zu ändern, können Sie dieses Ereignis verwenden, um Identifizieren Sie, wo das Ereignis Feuer war 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); 

}