0

I have

function getProductAsHtmlString(product) {
  return `<article class="product">
    <form id="disappear">
      <fieldset></fieldset>

      <fieldset></fieldset>
      </form>
  </article>`;
}

function renderProducts(arrToRender) {
  const arrOfHtmlproducts = arrToRender.map(getProductAsHtmlString);
  const strOfHtmlproducts = arrOfHtmlproducts.join('\n');

  document.getElementById('products').innerHTML = strOfHtmlproducts;
}

renderProducts(products);

document.getElementById('toggleView').addEventListener('click', function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("toggleView")) {
    //const parent = this.closest("section");
    this.querySelector("#disappear").style.display = "none";
    this.querySelector("#products").classList.toggle('grid-view');
  }
})
<section>
  <button id="toggleView" class="toggleView">Change Array</button>
  <div id="products">
  </div>
</section>

But I'd like to run both function disappear and toggleProductLayout at once when 'toggleView' button is clicked. How can I add multiple event listener?

Sunnyside
  • 1
  • 1
  • `document.getElementById('toggleView').addEventListener('click', function(e) {disappear(e), toggleProductLayout(e)})` – mplungjan May 10 '20 at 17:21
  • @mplungjan The problem is there are many document.getElementById('products'). And only first #products applied disappear. – Sunnyside May 10 '20 at 17:34
  • That is because you cannot have multiple identical IDs ID MUST be unique – mplungjan May 10 '20 at 17:40
  • @mplungjan Sorry, I mean there are many product in #products. But only first one product applied disappear. – Sunnyside May 10 '20 at 17:44
  • 1. Change to class. 2. Find the nearest static container and delegate - something like this: `document.getElementById('containerID').addEventListener('click', function(e) { const tgt = e.target; if (tgt.classList.contains("toggleView")) { const parent = this.closest("commonContainerTag"); parent.querySelector(". disappear").style.display="none"; parent.querySelector(".products").classList.toggle('grid-view'); } })` – mplungjan May 10 '20 at 17:45
  • where commonContainerTag is the div or table row or similar. – mplungjan May 10 '20 at 17:45
  • function getProductAsHtmlString(product){ return `
    `;} function renderProducts(arrToRender) { const arrOfHtmlproducts = arrToRender.map(getProductAsHtmlString); const strOfHtmlproducts = arrOfHtmlproducts.join('\n'); document.getElementById('products').innerHTML = strOfHtmlproducts; } renderProducts(products);     – Sunnyside May 10 '20 at 19:00
  • document.getElementById('toggleView').addEventListener('click', function(e) { const tgt = e.target; if (tgt.classList.contains("toggleView")) { const parent = this.closest("section"); parent.querySelector("#disappear").style.display="none"; parent.querySelector("#products").classList.toggle('grid-view'); } }) – Sunnyside May 10 '20 at 19:03
  • @mplungjan It still only first one product applied disappear. Because of my function getProductAsHtmlString(product)? – Sunnyside May 10 '20 at 19:04
  • Please update the question instead of posting code in comments – mplungjan May 10 '20 at 19:12
  • @mplungjan I edited. Could you review it again? – Sunnyside May 10 '20 at 19:25
  • You cannot have multiple items with the same ID - also what is arrToRender? – mplungjan May 10 '20 at 19:37
  • @mplungjan I understand! I put ID on form. And arrToRender is just for use .map . Is it weird...? I'm too confused – Sunnyside May 10 '20 at 19:47
  • Ok, I am off to bed. We want a [mcve] so please add an example of at least two rpodics so we can see what happens after the render – mplungjan May 10 '20 at 19:51

0 Answers0