javascript - 有什么方法可以知道是否在 JavaScript 中的 div 元素内的某个位置按下了某个按钮？

问题描述

基本上我正在尝试制作一个类似于 Trello 的待办事项列表应用程序。我有一个按钮，当按下它时会变成一个输入元素，获取一个“待办事项”项目并将其添加到列表中。这是通过这段代码实现的：

function createCardBoxNode(title){

/*HTML looks like: 
<div class="task-card">
                <div class="writings">
                    <p class="title">Tasks To Do</p>
                    <ul id="tasks">
                        <li>Task 1</li>
                    </ul>
                </div>
                <button class="btn-add-task"> 
                    Add New Task...
                </button>
                <input....>
</div>
*/
  var containerBox = createElement('div', {class:'task-card'});
  var writingPartBox = createWritingAreaNode(title);
  var newTaskBtn = createElement('button', {class:'btn-add-task show'},'Add New Task...');
  var newTaskInput = createElement('input', {class:'new-task hide', type:'text', placeholder:'New Task'});
  
//When 'add new task' is clicked, make it an input area
  newTaskBtn.addEventListener('click', function(){
    newTaskBtn.classList.remove('show');
    newTaskBtn.classList.add('hide');
    
    newTaskInput.classList.remove('hide');
    newTaskInput.classList.add('show');
    newTaskInput.focus();
  });
  
// when input is entered, that's a new "To Do Task" so add it to the list
  newTaskInput.addEventListener('keyup', function(e){
    if (e.keyCode === 13){
      // If Enter is pressed  
      var newTask = createListItems(newTaskInput.value);
      var listArea = document.getElementById('tasks');
      
      listArea.appendChild(newTask);
      
      newTaskInput.classList.remove('show');
      newTaskInput.classList.add('hide');
      newTaskInput.value = '';

      newTaskBtn.classList.remove('hide');
      newTaskBtn.classList.add('show');
    }
  });
  

  containerBox.appendChild(writingPartBox);
  containerBox.appendChild(newTaskBtn);
  containerBox.appendChild(newTaskInput);

  return containerBox;

}

这工作正常，直到我同时添加另一张卡并决定向第二张卡添加新任务。然后每个任务都被添加到第一张卡片上。我想知道是否有任何方法可以检查正在发送的“输入”是否将发送到检查卡标题的特定卡。我对每张卡可以添加多少任务没有任何限制，也不想添加。我还希望用户能够同时处理两张不同的卡。作为初学者，我也想只使用 JavaScript 来解决这个问题。我希望我已经很好地解释了这个问题。

编辑：我试过这样做：

if (document.querySelector('.title').innerText === title){
        var newTask = createListItems(newTaskInput.value);
        var listArea = document.getElementById('tasks');

        listArea.appendChild(newTask);
        
        newTaskInput.classList.remove('show');
        newTaskInput.classList.add('hide');
        newTaskInput.value = '';

        newTaskBtn.classList.remove('hide');
        newTaskBtn.classList.add('show');

但是我无法在第二个框中添加任何新内容。

标签： javascript

javascript - 有什么方法可以知道是否在 JavaScript 中的 div 元素内的某个位置按下了某个按钮？

问题描述

解决方案

推荐阅读