javascript - 我如何在正确的数组中添加元素

Question

我不能在我按下按钮“add__deal__btn”的“task__card”中精确地执行“deal__card”。它出现在存在的最后一个“task__card”中。 我想我无法在数组中添加正确的元素，但我不知道如何解决这个问题。 我该如何修复它？

HTML

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

CSS

.task__card{
    display: inline-block;
    margin-right: 10px;
    background: darksalmon;
}

.deal__card{
    background-color: #b4d8ff;
    margin: 8px;
}

JS

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.innerHTML = addTitle.value
  task.appendChild(taskTitle)
  let addDealinput = document.createElement("input");
  let br = document.createElement("br");
  addDealinput.className = "add__deal__input";
  let addDealBtn = document.createElement("button");
  addDealBtn.className = "add__deal__btn";
  addDealBtn.innerHTML = "Add deal";
  task.appendChild(addDealinput);
  task.appendChild(br);
  task.appendChild(addDealBtn);
  tasks.append(task);

  let dealBtn = document.querySelectorAll('.add__deal__btn');
  let taskCard = document.querySelectorAll('.task__card');
  let dealInput = document.querySelectorAll('.add__deal__input');

    for(let l=0;l<taskCard.length;l++){
        for(let i = 0;i < dealBtn.length;i++){
            dealBtn[i].onclick = function(){
                for(let inp=0;inp<dealInput.length;inp++){
                    taskDeal = document.createElement('div');
                    taskDeal.className = 'deal__card';
                    let  p = document.createElement("p");
                    p.innerHTML = dealInput[inp].value;
                    taskDeal.appendChild(p);
                }
                taskCard[l].append(taskDeal);
            }
        }
    }
}

非常感谢

Answer 1

您应该在此处使用this。试试这个:

dealBtn[i].onclick = function() {
  taskDeal = document.createElement('div');
  taskDeal.className = 'deal__card';

  let  p = document.createElement("p");
  p.innerHTML = this.parentElement.querySelector('.add__deal__input').value;
  taskDeal.appendChild(p);

  this.parentElement.append(taskDeal);
}