Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

ELEMENTO ADICIONADO DISPARANDO O ALERT

Tentei fazer com que o elemento adicionado dispare o alert, ele até dispara mas faz isso 3 vezes. Já tentei algumas coisas mas não da certo, segue como está o código

<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');
    var paiLi = document.querySelector('.lista');
    for(var i = 0; i < lis.length; i++) {
        paiLi.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);
    });
</script>
4 respostas

Oi, Milena, coloque o alert no evento to botao

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

        var li = document.createElement('li');
        li.textContent = input.value;
        lista.appendChild(li);
        alert(input.value + " inserido");
});

Opa, obrigada! Mas no caso então eu só conseguiria por meio do botão, se eu quisesse fazer o alert aparecer clicando no novo

  • que foi criado ele sempre vai emitir mais de um alerta?

solução!

Milena, eu não entendi sua pergunta, mas o problema da repetição do alert esta no for

    // Remover este código
    var paiLi = document.querySelector('.lista');
    for(var i = 0; i < lis.length; i++) {
        paiLi.addEventListener('click', function(event) {
            alert(event.target.textContent);

        });
    }

Não sei se é isso q vc está querendo:

<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(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;
        li.addEventListener('click', function(event) {
            alert(event.target.textContent);
        });
        lista.appendChild(li);

    });

</script>

Vc pode testa aqui

Era isso mesmo, eu queria entender o que estava acontecendo com o for mas entendi com sua explicação, obrigada!