主页 / 问题 / 1593440
Accepted
Максим
Asked:2024-09-10 19:24:41 +0000 UTC2024-09-10 19:24:41 +0000 UTC

如何访问原本不在页面上的按钮？

  • 772

我正在创建一个带有状态按钮的待办事项列表。单击此按钮时，会显示一个弹出窗口，该按钮最初不在页面上，而是随输入的任务一起出现。问题是，对于第一个任务，按钮起作用并显示弹出窗口，但是如果您输入后续任务，按钮不起作用，请帮我找出错误是什么

    //создание задачи 
const inputField = document.querySelector('#inputField');
const clearButton = document.getElementById('clearButton');
const form = document.querySelector('#form');
const taskList = document.querySelector('#taskList');


inputField.addEventListener('input', function() {
  clearButton.style.display = this.value ? 'block' : 'none';
});

clearButton.addEventListener('click', function() {
  inputField.value = '';
  clearButton.style.display = 'none';
});


form.addEventListener('submit' ,(event) => {
event.preventDefault();

const taskText = inputField.value

const taskHTML = `<li class="TS">
                    <span>${taskText}</span>
                    <button data-action="start" id="btn-status">Открыто</button>
                </li>`

taskList.insertAdjacentHTML('beforeend',taskHTML);

inputField.value = "";
inputField.focus();

    //пробовал создать функцию,которая обращается к родителю 
taskList.addEventListener('click',popupTask)

function popupTask(event){
    if(event.target.dataset.action === "start"){
    const parentNode =  event.target.closest('.TS');
    parentNode.add()

    }
}
//popup
document.getElementById("btn-status").addEventListener("click",function(){
    document.getElementById("myModal").classList.add("open")
})

document.getElementById("close-myModal-btn").addEventListener("click",function(){
    document.getElementById("myModal").classList.remove("open")
})

这是添加任务的块

  <div class="block-two">
                <div class="list-block">
                    <p id="p1"><b>Задачи</b></p>
                    <p id="p2"><b>Статус</b></p>
                </div>
                <div class="task-status">
                    <ul class="ts-list" id="taskList">
                            <!-- <li class="TS">
                                <span>Полить цветы</span>
                                <button data-action="start" id="btn-status">Открыто</button>
                            </li> -->
                    </ul>
                </div>
            </div>

这是如果我单击后续任务的按钮时弹出的错误（第一个任务除外，弹出窗口显示在第一个任务上）： TypeError:parentNode.add is not a function at HTMLUListElement.popupTask

javascript

2 个回答

  1. 如何访问原本不在页面上的按钮？

    一种解决方案是使用事件委托...作为这种方法的一种布局。

    const ou = document.querySelector('ul')
document.querySelector('.add').addEventListener('click', _ => {
  const oi = document.querySelector('input')
  const o = temp.content.cloneNode(true)
  o.querySelector('span').textContent = oi.value
  oi.value = ''
  ou.append(o)
})
ou.addEventListener('click', e => {
  const o = e.target.closest('li')
  if (!o) return
  o.querySelector('button').classList.add('off')
})
    .off {
  display: none;
}
li + li {
  margin-top: 5px;
}
    <input />
<button class='add'>+</button>
<ul></ul>
<template id='temp'>
  <li>
    <span></span>
    <button>Открыто</button>
  </li>
</template>

    • 0
  2. Best Answer

    问题是，对于每个新任务，您都向 DOM 添加一个按钮，但该按钮的单击事件处理程序仅针对第一个按钮安装，因为该处理程序是id btn-status在添加任务之前安装在元素 c 上的。

    form.addEventListener('submit', (event) => {
  event.preventDefault();

  const taskText = inputField.value;

  const taskHTML = `<li class="TS">
                      <span>${taskText}</span>
                      <button data-action="start" class="btn-status">Открыто</button>
                    </li>`;

  taskList.insertAdjacentHTML('beforeend', taskHTML);

  inputField.value = "";
  inputField.focus();
});

// Делегирование событий на родителя taskList
taskList.addEventListener('click', (event) => {
  if (event.target.classList.contains('btn-status')) {
    document.getElementById("myModal").classList.add("open");
  }
});

document.getElementById("close-myModal-btn").addEventListener("click", function(){
  document.getElementById("myModal").classList.remove("open");
});

    btn-status 按钮单击处理程序现在通过事件委托安装。现在，处理程序不再将处理程序附加到特定按钮，而是附加到父级 (taskList)，该父级始终存在于 DOM 中。

    • 0

相关问题