I'm trying to target different elements on the page by it's data-product, and setting a rule that if the data-product is a certain number then to run the function. But at the moment the functions runs multiple times and i'm not sure why this is.

var targetProduct = document.querySelectorAll('.content[data-product]').forEach(function(el) {
  if ('1'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage();
  } else if ('2'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage();
  }
});


function addMessage() {
  document.querySelectorAll('.product').forEach(function(el) {
    el.insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
  });
}

<div class="content" data-product="1">
  <p class='product'>Product 1</p>
</div>

<div class="content" data-product="2">
  <p class='product'>Product 2</p>
</div>

<div class="content" data-product="3">
  <p class='product'>Product 3</p>
</div>

<div class="content" data-product="4">
  <p class='product'>Product 4</p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your addMessage() function is adding the Sale text to all elements through the .forEach method. You should instead pass to it the element that needs to have .insertAdjacentHTML done to it and then inside the function only update that one element.

Here is a working example. Note that I have combined the two if-statements into one using the logical OR (||) operator.

const targetProduct = document.querySelectorAll('.content[data-product]')

targetProduct.forEach(function(el) {
  const attr = el.getAttribute('data-product')
  if ('1'.indexOf(attr) > -1 || '2'.indexOf(attr) > -1) {
    addMessage(el)
  }
})

function addMessage(el) {
  el.insertAdjacentHTML('afterend', "<p style='color: red'>Sale</p>")
}

<div class="content" data-product="1">
  <p class="product">Product 1</p>
</div>

<div class="content" data-product="2">
  <p class="product">Product 2</p>
</div>

<div class="content" data-product="3">
  <p class="product">Product 3</p>
</div>

<div class="content" data-product="4">
  <p class="product">Product 4</p>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you want to add a label to particular item, you could use this. Does it solve your problem?

var targetProduct = document.querySelectorAll('.content[data-product]').forEach(function(el) {
  if ('1'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage('1');
  } else if ('2'.indexOf(el.getAttribute('data-product')) > -1) {
    addMessage('2');
  }
});


function addMessage(id) {
  document.querySelectorAll('.content[data-product="'   id   '"] .product').forEach(function(el) {
    el.insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
  });
}

<div class="content" data-product="1">
  <p class='product'>Product 1</p>
</div>

<div class="content" data-product="2">
  <p class='product'>Product 2</p>
</div>

<div class="content" data-product="3">
  <p class='product'>Product 3</p>
</div>

<div class="content" data-product="4">
  <p class='product'>Product 4</p>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>