Блог

Главная - Вопросы по программированию - Как взаимодействовать с несколькими добавленными детьми

Как взаимодействовать с несколькими добавленными детьми

#javascript #html

Вопрос:

я создаю список задач в качестве упражнения для начинающих, чтобы тренировать свои навыки JS, но я наткнулся на стену (снова). Как вы можете видеть в моем коде, я могу создавать задачи, которые необходимо выполнить, и к каждой задаче я добавил 2 кнопки. Теперь я хочу, чтобы обе кнопки делали одно и то же (удаляли задачу). Я хотел бы создать список добавлений к этим кнопкам, но, поскольку я создал их с помощью JS, а не HTML, я теперь не знаю, как получить к ним доступ или их поведение (я не знаю, как получить их идентификатор или есть ли у них вообще). Итак, мой вопрос таков: как я могу получить доступ к этим кнопкам с помощью JavaScript? Спасибо.

 let b1 = document.getElementById('addItem');
let d1 = document.getElementById('resetList');
let content = document.getElementById('listItem').value;
let Liste = document.getElementById('laListe');

var addTask = function() {
  var text = document.getElementById('listItem').value;
  var li = document.createElement('li');
  var buttons = document.createElement('button');
  buttons.innerHTML = "X";
  var buttons2 = document.createElement('button');
  buttons2.innerHTML = "Done";
  li.innerHTML = text;
  li.append(document.createTextNode(" "));
  document.getElementById('laListe').appendChild(li).appendChild(buttons);
  li.append(document.createTextNode(" "));
  li.append(buttons2);
}

document.getElementById('addItem').onclick = function(event) {
  event.preventDefault()
};
b1.addEventListener('click', function() {
  addTask();
});



d1.addEventListener('click', function() {
  document.getElementById('laListe').innerText = " ";
});


document.getElementById('resetList').onclick = function(event) {
  event.preventDefault()
}; 
 <html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="Todo.css">
  <title>ToDo App</title>
  <script src='todo.js' defer></script>
</head>

<body>

  <h1>To-Do List</h1>
  <form id="Listcreator" name="itemAdd">
    <input id="listItem" type="text">
    <button id="addItem" type="submit"> Ajouter </button>
    <button id="resetList" type="submit"> Tout Enlever</button>
  </form>

  <ul id="laListe"> </ul>


</body>

Ответ №1:

   var buttons = document.createElement('button');
  buttons.innerHTML = "X";
  buttons.addEventListener("click", function(){
      this.parentNode.remove();
  });
  var buttons2 = document.createElement('button');
  buttons2.innerHTML = "Done";
  buttons2.addEventListener("click", function(){
      this.parentNode.remove();
  });

Ответ №2:

Вы можете добавить прослушиватель событий к своим кнопкам, когда они будут созданы.

https://jsfiddle.net/cnsxaL3b/

После добавления прослушивателей событий ваш код должен выглядеть следующим образом:

 let b1 = document.getElementById('addItem');
let d1 = document.getElementById('resetList');
let content = document.getElementById('listItem').value;
let Liste = document.getElementById('laListe');

var addTask = function() {
  var text = document.getElementById('listItem').value;
  var li = document.createElement('li');
  var buttons = document.createElement('button');
  buttons.innerHTML = "X";
  var buttons2 = document.createElement('button');

  // Event listener for first button
  buttons.addEventListener('click', function() {
    alert('clicked button1');
  });

  // Event listener for first button
  buttons2.addEventListener('click', function() {
    alert('clicked button2');
  });

  buttons2.innerHTML = "Done";
  li.innerHTML = text;
  li.append(document.createTextNode(" "));
  document.getElementById('laListe').appendChild(li).appendChild(buttons);
  li.append(document.createTextNode(" "));
  li.append(buttons2);
}

document.getElementById('addItem').onclick = function(event) {
  event.preventDefault()
};
b1.addEventListener('click', function() {
  addTask();
});

d1.addEventListener('click', function() {
  document.getElementById('laListe').innerText = " ";
});

document.getElementById('resetList').onclick = function(event) {
  event.preventDefault()
};
Метки: