Функция Js не может перезаписать внутренний html, уже введенный в тело html

#html #dom #dom-events

#HTML #дом #дом-события

Вопрос:

** Функция DisplayFunction используется для отображения продуктов в Html. Я пытаюсь вызвать функцию при onclick ,но при отправке другого параметра проблема в том, что «innerHTML не может быть перезаписан при втором вызове».**

 var counter = 0;  var parentRow = document.getElementById("row-append");  function displayProducts(productsApi){  var empty = "";  for(p of productsApi){  if(counter lt; 12)  {  empty  = `lt;div class="col-lg-3 col-md-6 py-5"gt;lt;div class="product-item"gt; lt;div class="item-img"gt; lt;img src="${p.pImg}" class="img-fluid"gt; lt;/divgt;  lt;/divgt; lt;div class="product-details"gt; lt;div class="d-flex justify-content-between py-3"gt;  lt;h6gt; ${p.pName}lt;/h6gt; lt;h6gt; ${p.pPrice} $lt;/h6gt;lt;/divgt;lt;div class="d-flex justify-content-between"gt;  lt;button class="btn btn-favorite btn-sm" onclick="addToFavorites('${p.pName}','${p.pImg}','${p.pPrice}')" gt; lt;i class="fas fa-heart" gt;lt;/igt; lt;/buttongt;  lt;button class="btn btn-cart btn-sm" onclick="addProduct('${p.pName}','${p.pImg}','${p.pPrice}')"gt;Add to Cart lt;/buttongt;  lt;/divgt;lt;/divgt;lt;/divgt;`  parentRow.innerHTML = empty;   counter  ;   }     }   }  document.getElementById("men-products").addEventListener("click",function(){  parentRow.innerHTML = "";   displayProducts(productsAll.men);  })