Início / coding / Perguntas / 79551496
Accepted
Hashim Qureshi
Asked: 2025-04-03 04:13:04 +0800 CST

AddEventListener agindo de forma estranha

  • 772

Acabei de começar a aprender javascript. Estou criando um aplicativo ToDo. Sempre que clico no botão Adicionar tarefa, o myFunction que criei não está funcionando como deveria. Sempre que o botão é clicado, leva segundos para responder, além da saída no console ser multiplicada. Obrigado antecipadamente. Muito apreciado.

function myFunction() {
  // code to be executed when the button is clicked
  const taskInput = document.getElementById("taskInput");
  const taskList = document.getElementById("taskList");
  //const task = taskInput.value.trim();
  const myButton = document.getElementById("mButton");

  //document.getElementById("taskList").innerHTML = userInput;
  myButton.addEventListener("click", function() {
    const li = document.createElement("li");
    li.createElement = '${taskInput.value} <button class="delete" onclick="deleteTask">Delete</button>';
    console.log("I m clicked");
  });
}
<script src="script.js"></script>
<div class="container">
  <h3>To-Do List</h3>
  <input type="text" id="taskInput" placeholder="Enter a task" />
  <button id="mButton" onclick="myFunction()">Add Task</button>
  <ul id="taskList"></ul>
</div>

javascript

2 respostas

  1. O principal problema no seu código é que você chama myFunction()quando o botão é clicado, mas ele mesmo define outro manipulador de eventos de clique no mesmo botão. Em vez disso, você precisa executar seu código quando a página carrega .

    No entanto, existem outros problemas:

    • Use acentos graves ( `) para delimitar uma string interpolada
    • Use innerHTMLpara definir o HTML de um elemento, não createElement().
    • Chame append()o alvo ulpara adicionar o que livocê criou a ele
    • Use um único evento delegado para manipular cliques no botão "Excluir" para remover os lielementos filhos.

    Além disso, como uma sugestão adicional para melhor UX, envolva o inputem um formelemento e altere o manipulador de eventos para escutar o submitevento daquele formulário. Dessa forma, seu novo item será adicionado quando o usuário clicar no botão, mas também quando ele pressionar, Returno que é mais rápido e fácil na maioria dos casos.

    Aqui está um exemplo prático com essas correções aplicadas:

    const taskInput = document.querySelector("#taskInput");
const taskList = document.querySelector("#taskList");
const form = document.querySelector("#todo-form");

// Add task handler
form.addEventListener("submit", function(e) {
  e.preventDefault();
  const li = document.createElement("li");
  li.innerHTML = `${taskInput.value} <button class="delete">Delete</button>`;
  taskList.append(li);
  taskInput.value = '';
});

// Delete button handler
document.querySelector('.container').addEventListener('click', e => {
  if (e.target.classList.contains('delete')) {
    e.target.closest('li').remove();
  }
});
    <script src="script.js"></script>
<div class="container">
  <h3>To-Do List</h3>
  <form id="todo-form">
    <input type="text" id="taskInput" placeholder="Enter a task" />
    <button id="mButton">Add Task</button>
  </form>
  <ul id="taskList"></ul>
</div>

    • 2
  2. Best Answer

    O <button>em si tem um onclickatributo que significa que myFunction()é chamado toda vez que é clicado. Em myFunction, você está adicionando outro manipulador de eventos via myButton.addEventListener, mas o original ainda está lá, então da próxima vez que você clicar no botão, ambos myFunction()e a nova função do manipulador são chamados. A myFunctionchamada então adiciona outro manipulador de eventos, e assim por diante. Você continua adicionando novos manipuladores de eventos e nunca remove nenhum deles.

    • 1

relate perguntas