为啥单击 1 次后此按钮无用？

Posted 2023-05-08

【中文标题】为啥单击 1 次后此按钮无用？

【英文标题】：why is this button useless after 1 click?为什么单击 1 次后此按钮无用？

【发布时间】：2021-09-25 16:57:22

【问题描述】：

我想在每次单击按钮时添加一个 div（使用 class="book-card"）（使用 class="add-book-btn"。使用下面的代码，当我第一次单击按钮时，它可以工作。但后来出了点问题，按钮似乎不起作用。

html：

<fieldset class="self">
  <legend class="self-title">curently reading</legend>
  <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
</fieldset>

JS：

const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName("add-book-btn");


addBookBtn[0].addEventListener("click", function() 
    selfs[0].innerHTML += `<div class="book-card"></div>`;
    console.log(selfs[0]);
);

【参考方案1】：

使用@Dylan Cadd 的代码并专注于我的元素，它起作用了。但我不明白有什么区别

JS：

const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName("add-book-btn");


addBookBtn[0].addEventListener("click", function() 
    let innerDiv = document.createElement('div');
    innerDiv.className = 'book-card';
    selfs[0].appendChild(innerDiv);
);

【参考方案2】：

试试这个代码：

const selfs = document.getElementsByClassName("self");

function add_card() 
  const addBookBtn = document.getElementsByClassName('add-book-btn');
  addBookBtn[0].addEventListener('click', function()
    selfs[0].innerHTML += `<div class="book-card"></div>`;
    console.log(selfs[0] );
    
    add_card();
  );
;

add_card();

<fieldset class="self">
  <legend class="self-title">curently reading</legend>
  <button class="add-book-btn">Click</button>
</fieldset>

【参考方案3】：

我找到了适合我的解决方案。我没有编辑innerHTML，而是使用类名动态创建 div 并将其附加到主字段集。

const selfs = document.querySelector(".self");
const addBookBtn = document.querySelector(".add-book-btn");


addBookBtn.addEventListener("click", function() 
    let innerDiv = document.createElement('div');
    innerDiv.className = 'book-card';
    selfs.appendChild(innerDiv);
    console.log(selfs);
);

这个解决方案适合我，如果不适合你请告诉我

【讨论】：

您不能将事件侦听器添加到NodeList。

如您所见，这不是整个 html。我想要多个这样的字段集

@leech 我用我为自己工作的 sn-p 更新了我的答案

这是有效的，因为在这个 html 中只有一个字段集和一个按钮。想象一下有 2 个字段集，我将如何在其中添加事件侦听器？

@leech 我还不能对帖子发表评论，但可能有效的原因是因为你不能使用.innerHTML 将整个 div 附加到元素，DOM 不喜欢它，但是您可以动态创建它们并很好地附加它而不会引发错误