1
resposta

ALERT para os novos itens da lista

<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('li');

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

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

            alert(this.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);
    });
</script>

Alguém conseguiu fazer com que os novos itens da lista aparecesse o alerta?

1 resposta

Fala Janaina, tudo bem? Espero que sim!

Para fazer isso, você pode separar a função:

function mostraAlerta() {

            alert(this.textContent);
        }

Adicionar um addEventListener na li criada que chama essa função:

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

        var li = document.createElement('li');
        li.textContent = input.value;
        li.addEventListener("click", mostraAlerta)
        lista.appendChild(li);
    });

E aproveitar que ja separamos essa função, podemos alterar no addEventListener do li dentro do for também:

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

        lis[i].addEventListener('click', mostraAlerta);
    }

Assim fica o código completo:

<script>

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

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

        lis[i].addEventListener('click', mostraAlerta);
    }

    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;
        li.addEventListener("click", mostraAlerta)
        lista.appendChild(li);
    });

        function mostraAlerta() {
            alert(this.textContent);
        }
</script>

Qualquer dúvida sobre o addEventListener, recomendo dar uma olhada na documentação

Espero ter ajudado, abraços e bons estudos :D