Tenho uma lista de li
e gostaria de adicionar um evento de click
em todos eles.
Ao clicar, quero pegar o conteúdo e jogar em um outro elemento.
<ul>
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
</ul>
<div id="exibir"></div>
No exemplo, ao clicar no primeiro li
, a div com id exibir
deveria aparecer “Conteúdo 1”.
Você pode usar o document.querySelectorAll('<elemento>')
para obter a lista de todos os elementos.
Em seguida, usamos o forEach
para ter acesso a cada <li>
.
Dessa forma podemos criar o evento de click
para inserir o conteúdo do <li>
no elemento #exibir
.
Exemplo
Vou adicionar um id
no seu <ul>
só para termos uma identificação.
HTML
<ul id="lista-conteudos">
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
<li>Conteúdo 1</li>
</ul>
<div id="exibir"></div>
Javascript
// vamos obter todos os <li> da #lista-conteudos
const conteudos = document.querySelectorAll('#lista-conteudos li')
// pegamos o elemento #exibir
const exibir = document.querySelector('#exibir')
// loop em todos <li> para adicionar o evento
conteudos.forEach( (li) => {
// criando evento de click no <li>
li.addEventListener('click', (ev) => {
// atribuindo no #exibir o conteúdo do <li>
exibir.innerText = li.innerText
})
});