时间戳

首页 > 解决方案 > 多个按钮事件 = 未捕获的类型错误：无法读取未定义的属性“删除”

javascript - 多个按钮事件 = 未捕获的类型错误：无法读取未定义的属性“删除”

问题描述

我想在每个删除按钮（1、2、3）上添加一个 EventListener，但我得到一个错误 undefined "add" of null，有什么想法吗？所以如果我点击删除按钮，它会弹出确认窗口

索引.html

<div id="confirmWindow" class=" hidden">
    <p>Are you sure want to delete?</p>
    <button class="buttonYes">Yes</button>
    <button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 1</button>

<div id="confirmWindow" class=" hidden">
    <p>Are you sure want to delete?</p>
    <button class="buttonYes">Yes</button>
    <button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 2</button>

<div id="confirmWindow" class=" hidden">
    <p>Are you sure want to delete?</p>
    <button class="buttonYes">Yes</button>
    <button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 3</button>

应用程序.js

const deleteButton = document.querySelectorAll('#trashIcon');
const confirmWindow = document.querySelectorAll('#confirmWindow');
const buttonYes = document.querySelectorAll('.buttonYes');
const buttonNo = document.querySelectorAll('.buttonNo');


const openWindow = function (){
  confirmWindow.classList.remove('hidden');
  deleteButton.classList.add('hidden');
}

const closeDeleteWindow = function (){
  confirmWindow.classList.add('hidden');
  deleteButton.classList.remove('hidden');
}

for (let i=0; i < deleteButton.length; i++){
  deleteButton[i].addEventListener('click', openWindow);
}

for (let i=0; i < buttonNo.length; i++){
  buttonNo[i].addEventListener('click', closeDeleteWindow);
}

标签： javascripthtmlcss

解决方案

id 对于 HTML 元素应该是唯一的。使用 class 代替 id

<style>.hidden {display: none;}</style>
<div id="confirmWindow1" class="confirmWindow1 hidden">
    <p>Are you sure want to delete?</p>
    <button class="buttonYes">Yes</button>
    <button id="buttonNo1" class="buttonNo">No</button>
</div>
<button class="trashIcon" id="trashIcon1">Delete 1</button>

<div id="confirmWindow2" class="confirmWindow2 hidden">
    <p>Are you sure want to delete?</p>
    <button class="buttonYes">Yes</button>
    <button id="buttonNo2" class="buttonNo">No</button>
</div>
<button class="trashIcon" id="trashIcon2">Delete 2</button>

<div id="confirmWindow3" class="confirmWindow3 hidden">
    <p>Are you sure want to delete?</p>
    <button class="buttonYes">Yes</button>
    <button id="buttonNo3" class="buttonNo">No</button>
</div>
<button class="trashIcon" id="trashIcon3">Delete 3</button>




const deleteButton = document.querySelectorAll('.trashIcon');
const confirmWindow = document.querySelectorAll('.confirmWindow');
const buttonYes = document.querySelectorAll('.buttonYes');
const buttonNo = document.querySelectorAll('.buttonNo');


const openWindow = function (obj){
  document.querySelectorAll('.confirmWindow'+obj.id.replace('trashIcon',''))[0].classList.remove('hidden');
  obj.classList.add('hidden');
}

const closeDeleteWindow = function (obj){
  document.querySelectorAll('.confirmWindow'+obj.id.replace('buttonNo',''))[0].classList.add('hidden');
  document.querySelectorAll('#trashIcon'+obj.id.replace('buttonNo',''))[0].classList.remove('hidden');
}

for (let i=0; i < deleteButton.length; i++){
  deleteButton[i].addEventListener('click', function(){
    openWindow(this);
  });
}

for (let i=0; i < buttonNo.length; i++){
  buttonNo[i].addEventListener('click', function(){
    closeDeleteWindow(this);
  });
}

推荐阅读