页面加载后出现按钮时如何将按钮放入变量中答案

【问题标题】：How put button into variable when it appears after page onload页面加载后出现按钮时如何将按钮放入变量中
【发布时间】：2020-01-21 20:10:31
【问题描述】：

按钮add__deal__btn出现后如何获取？当页面加载时 add__deal__btn 不存在，但是在我将 task__card 添加到 div 之后它会出现。按钮出现后如何操作？

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>

谢谢

【问题讨论】：

addDealBtn = document.createElement("button"); 已经将按钮放入变量中。您可以在创建后立即使用addDeal.push(addDealBtn) 将其添加到按钮列表中。您也可以在创建该按钮时分配addDealBtn.onclick = function() { ... }...

标签： javascript html css ecmascript-6

【解决方案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>

【讨论】：

【解决方案2】：

addDeal = document.querySelectorAll('.add__deal__btn'); 行只运行一次（脚本加载时）。那时，DOM 中不存在类 add__deal__btn 的 <button> 元素。

要实现您想要的，只需将事件侦听器添加到每个新生成的按钮。像这样：

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>

提示：您不再需要创建一个数组来存储您创建的每个新按钮。

【讨论】：