Элементы в DOM добавляются несколько раз

#javascript #arrays #dom #local-storage #e-commerce

Вопрос:

У меня проблема,каждый раз,когда я добавляю элемент,он умножается(например,если в корзине есть 1 элемент,при следующем щелчке он добавит еще 2,а если есть 3 элемента,он добавит еще 3,если 6, он добавит еще 4), это огромная проблема,пожалуйста, помогите!

Мой код js:

 let pList = document.getElementById("productList");

const addDrip = () => {
  let Drip, localObj, tObj;
  Drip = {
    name: "Traditional Drip",
    type: "normal",
    price: "2.00",
    imgSrc: "images/c5.png"
  };
  localObj = localStorage.getItem("Drip");

   if(!localObj) tObj = [];
   else tObj = JSON.parse(localObj);
   
  tObj.push(Drip)
  localStorage.setItem("Drip", JSON.stringify(tObj));
  
  for(let i = 0;i < tObj.length;i  ){
    
    let htmlDrip = `
     <div class="productDiv">
     <p>${tObj[i].name}</p> 
     <p>${tObj[i].type}</p>
     <p>${tObj[i].price}

lt;/p>

     <img src="${tObj[i].imgSrc}">

     </div>

     `

    document.getElementById("productList").innerHTML  = htmlDrip;

  }

}

 

Моя html-часть:
 <div class="cList">
      <img src="images/c5.png"class = "tDrip">
      <h1 class="Type">Traditional Drip</h1>
      <button id="tAdd"onclick="addDrip()">Add Traditional Drip</button>

    </div>

    <div id = productList></div>

1. Не могли бы вы, пожалуйста, предоставить рабочую среду, в которой я мог бы протестировать эту вещь, поскольку неясно, что на самом деле удерживает tObj и что на самом деле происходит с массивом.

2. Это происходит потому, что вы обновляете свои productList s innerHTML в цикле for. Вы можете очистить свои productList s innerHTML непосредственно перед циклом for

Ответ №1:

Это связано с тем, что в вашем массиве уже есть капельное обновление из локального хранилища, просто замените свой код JS на этот, и он будет работать так, как вы хотите.

 let pList = document.getElementById("productList");

const addDrip = () => {
  let Drip, localObj, tObj;
  Drip = {
    name: "Traditional Drip",
    type: "normal",
    price: "2.00",
    imgSrc: "images/c5.png"
  };
  localObj = localStorage.getItem("Drip");
console.log(localObj,"Local object")
   if(!localObj) {
   tObj = [];
     tObj.push(Drip)
   }else {
   tObj = JSON.parse(localObj);
   console.log(tObj,"T object")
   }
  localStorage.setItem("Drip", JSON.stringify(tObj));
  
  for(let i = 0;i < tObj.length;i  ){
    
    let htmlDrip = `
     <div class="productDiv">
     <p>${tObj[i].name}</p> 
     <p>${tObj[i].type}</p>
     <p>${tObj[i].price}

lt;/p>

     <img src="${tObj[i].imgSrc}">

     </div>

     `

    document.getElementById("productList").innerHTML  = htmlDrip;

  }

}

 

вам просто нужно нажать, когда ваш массив пуст. Попробуйте, это сработает.
ПРИМЕЧАНИЕ : вы также можете проверить демо-версию. Просто очистите локальное хранилище, если вы обновите.https://www.w3schools.com/код/tryit.asp?имя файла=GS7FA0970MF3

1. В этом случае необходимая часть работает,но она помещает элемент в локальное хранилище только один раз,в этом и заключается новая проблема

2. Я вижу, что при каждом нажатии кнопки localstorage обновляется другим хранилищем. В чем же в этом проблема.?

Ответ №2:

На самом деле вам не нужно перебирать массив при добавлении нового элемента. Сначала вы можете получить предметы из localStorage

HTML:

 <div class="cList">
    <img src="images/c5.png" class="tDrip">
    <h1 class="Type">Traditional Drip</h1>
    <button id="tAdd" onclick="addDrip()">Add Traditional Drip</button>

</div>

<div id="productList"></div>

Скрипт:

 const pList = document.getElementById("productList");
let localObj = JSON.parse(localStorage.getItem("Drip"));

const parseItems = () => {

    if (!localObj) localObj = [];
    for (let i = 0; i < localObj.length; i  ) {
        let htmlDrip = `
            <div class="productDiv">
                <p>${localObj[i].name}</p> 
                <p>${localObj[i].type}</p>
                <p>${localObj[i].price}

lt;/p>

                <img src="${localObj[i].imgSrc}">

            </div>

            `;

        pList.innerHTML  = htmlDrip;

    }

}
parseItems();
const addDrip = () => {

    let Drip;

    Drip = {

        name: "Traditional Drip",

        type: "normal",

        price: "2.00",

        imgSrc: "images/c5.png"

    };
    if (!localObj) localObj = [];

    localObj.push(Drip);

    localStorage.setItem("Drip", JSON.stringify(localObj));
    let htmlDrip = `

            <div class="productDiv">

                <p>${Drip.name}</p>

                <p>${Drip.type}</p>

                <p>${Drip.price}

lt;/p>

                <img src="${Drip.imgSrc}">

            </div>

            `;
    pList.innerHTML  = htmlDrip;

}