Как поместить кнопку в переменную, когда она появляется после загрузки страницы

Question

Как я могу получить add__deal__btn после его появления? Как я манипулирую им после появления

let addTitle = document.querySelector('.add__title');
let addBtn = document.querySelector('.add__btn');
let tasks = document.querySelector('.tasks');
let addDealBtn = [];

addBtn.onclick = function() {
  let task = document.createElement('div');
  task.className = 'task__card';
  let taskTitle = document.createElement("h4");
  taskTitle.innerHTML = addTitle.value
  task.appendChild(taskTitle)
  addDealBtn = document.createElement("button");
  addDealBtn.className = "add__deal__btn";
  addDealBtn.innerHTML = "Add deal";
  task.appendChild(addDealBtn);
  tasks.append(task);
}

//THIS CODE DOESN'T WORK

addDeal = document.querySelectorAll('.add__deal__btn'); 

for(let i = 0;i<addDeal.length;i++){
 addDeal[i].onclick= function(){ 
   alert();
 } 
}

<div class="add">
  <input type="text" class="add__title">
  <br>
  <button class="add__btn">Add</button>
</div>

<div class="tasks"></div>

Спасибо

Answer 1

Добавление события onclick при создании кнопки.

let addTitle = document.querySelector('.add__title');
let addBtn = document.querySelector('.add__btn');
let tasks = document.querySelector('.tasks');
let addDealBtn = [];

addBtn.onclick = function() {
  let task = document.createElement('div');
  task.className = 'task__card';
  let taskTitle = document.createElement("h4");
  taskTitle.innerHTML = addTitle.value
  task.appendChild(taskTitle)
  addDealBtn = document.createElement("button");
  addDealBtn.className = "add__deal__btn";
  addDealBtn.innerHTML = "Add deal";
  // Add onclick event here
  addDealBtn.onclick = function() {
      alert('Button clicked!');
  };
  task.appendChild(addDealBtn);
  tasks.append(task);
}

<div class="add">
  <input type="text" class="add__title">
  <br>
  <button class="add__btn">Add</button>
</div>

<div class="tasks"></div>

Answer 2

Строка addDeal = document.querySelectorAll('.add__deal__btn'); запускается только один раз (при загрузке скрипта). В то время в DOM не было элементов <button> с классом add__deal__btn.

Чтобы достичь желаемого, просто добавьте прослушиватель событий для каждой вновь создаваемой кнопки. Как это:

let addTitle = document.querySelector('.add__title');
let addBtn = document.querySelector('.add__btn');
let tasks = document.querySelector('.tasks');

addBtn.onclick = function () {
  let task = document.createElement('div');
  task.className = 'task__card';
  let taskTitle = document.createElement("h4");
  taskTitle.innerText = addTitle.value;
  task.appendChild(taskTitle);
  let addDealBtn = document.createElement("button");
  addDealBtn.className = "add__deal__btn";
  addDealBtn.innerText = "Add deal";
  task.appendChild(addDealBtn);
  tasks.append(task);
  addDealBtn.onclick = function() {
    alert('Hey it works!');
  };
}

<div class="add">
  <input type="text" class="add__title">
  <br>
  <button class="add__btn">Add</button>
</div>

<div class="tasks"></div>

Совет: Вам не нужно создавать массив для хранения каждой новой кнопки, которую вы создаете.