5
respostas

Eu fiz dessa forma, porém não entendi bem como isto está funcionando

<ul class="lista">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<input id="campo"><button id="botao">Adiciona</button>

<script>

    var lis = document.querySelectorAll('ul');

    for(var i = 0; i < lis.length; i++) {

        lis[i].addEventListener('click', function(event) {

            alert(event.target.textContent);

        });
    }

    var botao = document.querySelector('#botao');
    var input = document.querySelector('#campo');
    var lista = document.querySelector('.lista');

    botao.addEventListener('click',function() {

        var li = document.createElement('li');
        li.textContent = input.value;
        lista.appendChild(li);
        input.value = ""
    });
</script>
5 respostas

Fala ai João, tudo bem? Desculpa mas eu não vi nenhum problema no seu código, o mesmo deveria funcionar mesmo.

Espero ter ajudado.

Então, eu consegui solucionar, mas foi por acidente. Eu não entendi como o código está funcionando.

Fala João, qual seria suas dúvidas em relação aos códigos? Qual parte não entendeu? O que para você não faz sentido?

Fico no aguardo.

inicialmente, o codico tinha essa variavel selecionado as li: var lis = document.querySelectorAll('li'); , eu estava fazendo algumas experimentações e troquei o li pela ul e ficou assim var lis = document.querySelectorAll('ul');

antes, o codigo exibia alert no clique só para os itens que já estavam na lista e não os que eram adicionados por input e depois que eu troquei para ul os novos itens começaram a exibir os alertas também. Eu só não entendi o motivo.

Fala João, vamos lá:

antes, o codigo exibia alert no clique só para os itens que já estavam na lista e não os que eram adicionados por input e depois que eu troquei para ul os novos itens começaram a exibir os alertas também. Eu só não entendi o motivo.

É por causa do event bubbling, não vou reescrever o que você vai encontrar completo aqui: https://imasters.com.br/front-end/javascript-bubbling-e-capturing

Mas, basicamente é a ideia de um elemento filho disparada eventos para os pais até algum deles estiver escutando esse evento.

Espero ter ajudado.