当 5 个列表 <li> 项已添加到我动态生成的 <ul> 列表时，如何触发事件？

如何解决当 5 个列表 <li> 项已添加到我动态生成的 <ul> 列表时，如何触发事件？

我有一个 html 列表（如待办事项列表），我希望在用户向该列表中添加 5 个项目时显示一个按钮。

我用 js 写了这个，但它不起作用：

function addButton(){
const glist = document.querySelectorAll('.gratitude_container > ul > li')
const gratListArray = Array.from(glist);
if (gratListArray === 4) {
    FortuneButton.classList.remove('hidden')

}

我的 html 是：

    <form>
        <input type="text" placeholder="Enter it here..." class="gratitude_input" />
        <button class="gratitude_button" type="submit">
            <i class="fas fa-plus-circle"></i>
        </button>
    </form>
    </div>
   

    <div class="gratitude_container">
        <ul class="gratitude_list"></ul>
    </div>

</div>

有什么想法吗？

解决方法

你能在代码笔的演示中重现这个问题吗？ 查看您提供的代码，JS 永远不会命中，因为您的 ul 中没有任何 li。但这可能只是您粘贴的内容。

如果您可以针对同样的问题制作演示，那么帮助您会更容易。

,

可能您应该在 IF 语句中使用 gratListArray.length。

,

enter code here

      function showButton() {
        const list = document.getElementsByClassName("gratitude_list")[0];
        let items = list.getElementsByTagName("li");
        const button = document.getElementById("newButton");

        if (items.length >= 5) {
          button.style.display = "block";
        } else {
          button.style.display = "none";
        }
      }
      
      showButton();

    <div class="gratitude_container">
      <ul class="gratitude_list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <button id="newButton">Button</button>
    </div>

,

假设您按预期获得数组，我的解决方案是为您的函数添加一个事件侦听器。

根据您共享的代码，我看不出是什么触发了您当前的功能。 所有函数都需要由事件声明，例如。页面加载、计时器或用户交互……仅举几例。每次单击时都会使用事件侦听器更新数组并测试 if 语句。

document.querySelector("button").addEventListener("click",() => {
    const glist = document.querySelectorAll('.gratitude_container > ul > li')
    const gratListArray = Array.from(glist);
    if (gratListArray.length === 4) {
    FortuneButton.classList.remove('hidden')
})

希望对您有所帮助并祝您编程愉快。