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>