1

Preciso adicionar um <li> via JavaScript, mas quando adicionado, a partir da segunda adição, ele começa a duplicar, triplicar e por ai vai, preciso que adicione somente 1 elemento por click.

var btn = document.querySelector("#btn");
var ps = document.querySelector(".pessoinhas");
var psL = document.querySelector("#pessoinhasLi");

function add() {

  btn.addEventListener("click", function(event) {

    event.preventDefault();
    var campo = document.getElementById("campoUL");
    var input = document.createElement("li");
    campo.appendChild(input).innerHTML = ps.value;

  });
}
<!DOCTYPE html>
<html>

<head>
  <title>Teste</title>
</head>

<body>
  <p>Tarefa</p>
  <div>
    <ul id="campoUL"></ul>
  </div>
  <div>
    <button id="btn" onclick="add()">Adicionar</button>
    <input type="text" class="pessoinhas">
  </div>
</body>

</html>

1 Resposta 1

3

Como você está declarando o método a ser executado diretamente no botão, não faz sentido que esse adicione um eventListener para o evento de click.

 <button id="btn" onclick="add()">Adicionar</button>

E no javascript:

function add() {

  btn.addEventListener("click", function(event) {
    // ...
  }
}

Assim cada vez que você clicar no botão ele vai adicionar todo o comportamento mais uma vez e isso explica o comportamento relatado.

Simplesmente remova o trecho onde você adiciona o listener.

var btn = document.querySelector("#btn");
var ps = document.querySelector(".pessoinhas");
var psL = document.querySelector("#pessoinhasLi");

function add() {
    event.preventDefault();
    var campo = document.getElementById("campoUL");
    var input = document.createElement("li");
    campo.appendChild(input).innerHTML = ps.value;
}
<!DOCTYPE html>
<html>

<head>
  <title>Teste</title>
</head>

<body>
  <p>Tarefa</p>
  <div>
    <ul id="campoUL"></ul>
  </div>
  <div>
    <button id="btn" onclick="add()">Adicionar</button>
    <input type="text" class="pessoinhas">
  </div>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .