显示从JavaScript到HTML的数据，加载并在1秒后消失，当我尝试用if语句过滤它们时。为什么？

我是JS新手，在同一个HTML页面中动态显示我的项目时遇到了一些问题。我有三类产品。它们的ID都是1（奶酪）、2（饮料）或3（蔬菜）

我在哪里需要帮助以及我尝试过的内容：当我添加addEventListener时，我想要显示的产品类别将显示0.5秒。当我移除它时，它就工作了。我不知道为什么。我已经尝试了很多可能的方法来解决它，但显然我被卡住了

注意：如果我完全删除事件侦听器和If-else语句，整个产品列表将完美显示。我还将发布我的产品图片。

此外，如果我有3个不同的分类，我也希望有一个页面的所有产品，什么是最有效的方式做呢？为3个不同的ID使用3个if-else语句和事件侦听器，否则会显示所有内容吗

我试图在评论中解释，让你的生活更轻松。顺便说一句，当我试图将所有产品显示在一起时，不需要发布html，因为它是有效的

  //just a button in navigation that will display the elements in my page dynamically
  //it will be used for the event clicker
  const cheeseHolder = document.querySelector('.cheeseProd');

  //the div that they will be displayed. .innerHtml will be used and .insertAdjacentHTML after that.
  const containerProducts = document.querySelector(".product-center-container");
  const displayProducts = function (products) {
    containerProducts.innerHTML = "";
  
    //there are 15 products for learning purposes in my products array. Every one of them is not an object but its displayed like that:
    //There are more products with different ids: 1,2,3
    // const cheeseItem1 = { p_image: "images/3cheese1.png", p_title: "Cheese1", p_price: 133, id:'3'};
    // products = [cheeseItem1]
    products.forEach((element) => {
      const html =`
      <div class="product-center-container">
      <div class="product">   
      <a href="pDescription.html"><img class ="p_image" src="${element.p_image}"></a>
      <h1 class="p_title">${element.p_title}</h1>
      <h4 class="p_price">${element.p_price}.-</h4>
      <button class="itemsToCart"><img src="images/cartAdd.png" alt="Basket displayed here"></button>
      </div>
      </div>
      `;
      
      //not sure about putting it here
      //have also tried displayProducts() with an eventListener outside of this function but it doesn't work
      cheeseHolder.addEventListener('click', function(){
        //if I remove the event listener anc I leave the statement below the category is displayed. 
        //When I add it it's displayed for 0.5 seconds.
        if (element.id === '3') {
          containerProducts.insertAdjacentHTML('afterbegin',html);
        }
      });
    });
  };
displayProducts(products);

//导航中的一个按钮将动态显示我的页面中的元素
//它将用于事件点击器
const cheeseHolder=document.querySelector（'.cheeseProd'）；
//将显示的div。将使用innerHtml，然后使用.insertAdjacentHTML。
const containerProducts=document.querySelector（“.product center container”）；
const displayProducts=功能（产品）{
containerProducts.innerHTML=“”；
//在我的产品阵列中，有15个用于学习的产品。每个产品都不是一个对象，而是这样显示的：
//有更多具有不同ID的产品：1,2,3
//const cheeseItem1={p_image:“images/3cheese1.png”，p_标题：“Cheese1”，p_价格：133，id:'3'}；
//产品=[cheeseItem1]
products.forEach（（元素）=>{
常量html=`
${element.p_title}
${element.p_price}-
`;
//我不确定把它放在这里
//还尝试过使用此函数之外的eventListener使用displayProducts（），但它不起作用
cheeseHolder.addEventListener（'click'，function（）{
//如果我删除事件侦听器anc，我将保留显示类别下面的语句。
//当我添加它时，它会显示0.5秒。
如果（element.id=='3'）{
containerProducts.insertAdjacentHTML（'afterbegin'，html）；
}
});
});
};
展示产品(产品);；

---

首先，事件侦听器不应位于

forEach

块中。您所做的是为每个产品（15）添加一个事件侦听器，因此基本上您创建了15个事件侦听器。此外，您正在删除包含以下语句的内容：

containerProducts.innerHTML=“”

如果我理解正确，您希望单击按钮，然后在产品数组中循环，如果它们具有特定id，您希望将它们添加到div：


将事件侦听器放置在
displayProducts
函数之外
将
displayProducts
作为回调传递给事件侦听器
创建
html
变量后，可以添加验证以运行
containerProducts.insertAdjacentHTML（'afterbegin'，html）


你应该有这样的东西：

cheeseHolder.addEventListener（'click'，displayProducts）；
功能显示产品（事件）{
//你可以在这里做产品
//在foreach中添加验证
//将html附加到containerProducts
}

我想这应该对你有帮助


编辑日期：2021年3月22日

因此，在明确要求之后，我建议您执行以下操作

// have a function to render the elements
function displayProducts() {
}

// have another function to filter the items
function filterProducts(categoryId) {
   // loop your products array and add a condition 
   // to only display the ones which id matches the categoryId param
}

// for every filter button bind a click event

button1.addEventListener('click', function() {
  filterProducts(1)
})

button2.addEventListener('click', function() {
  filterProducts(2)
})

// dont forget to call the displayProducts function 
// so all the items are visible in the screen
displayProducts()

我希望这是清楚的
对不起，我误读了你的问题。您是否尝试将条件移到事件侦听器之外？所以
if（condition）{cheeseholder.addeventlistener（…）}
。现在您正在为每个项目添加一个事件侦听器。@即使我将其移到事件侦听器之外，也应该将其全部放在循环中。因为我需要迭代元素，我想..这是做什么的，它显示了整个产品列表，过滤应该去哪里？我的意思是他如果其他语句splus即使我这样做了，列表也会在1分钟后消失..好的，你想显示所有项目，当你点击按钮时，你想只显示id==3的项目？没错！因此，实际上，当您按下某个产品类别时，会显示该类别并删除其他产品！如果id==1，则显示id为1的类别@新手程序员刚刚更新了回复，希望有帮助