How to proper use "For Loop and Event Listeners" in JavaScript

Question

I'm doing some testing with the product page. I want to when hover each product and change style with the JavaScript.

In my research instead of adding them 1 by 1, I found For Loop method is the fastest way and easier to add more products in the future.

Here's my snippet:

var pistiProductA = document.getElementsByClassName('pisti-product-a');
var pistiProductItem = document.getElementsByClassName('pisti-product-item');
var pistiProductItemLabel = document.getElementsByClassName('pisti-product-item-label');


for (i = 0; i < pistiProductA.length; i++) {
  pistiProductA[i].addEventListener("mouseover", function() {
 mouseOver(pistiProductA[i]);
  });
  
  pistiProductA[i].addEventListener("mouseout", function() {
 mouseOut(pistiProductA[i]);
  });
}

  function mouseOver() {
   pistiProductItem[0].style.transition = '0.3s all ease';
   pistiProductItemLabel[0].style.transition = '0.3s all ease';
 pistiProductItem[0].style.backgroundColor = '#888888';
   pistiProductItemLabel[0].style.color = '#f7cc1b';
   pistiProductItemLabel[0].style.fontWeight = '600';
  }
  
  function mouseOut() {
    pistiProductItem[0].style.transition = '0.3s all ease';
   pistiProductItemLabel[0].style.transition = '0.3s all ease';
 pistiProductItem[0].style.backgroundColor = '#111111';
   pistiProductItemLabel[0].style.color = '#000000';
   pistiProductItemLabel[0].style.fontWeight = '400';
  }

/* CSS used here will be applied after bootstrap.css */
.pisti-product-item {
 border-radius: 6pt;
    background-color: #111111;
}
  
.pisti-product-item-label {
  color: #000;
  font-size: 14pt;
  font-weight:400;
}

.pisti-product-a:hover {
  text-decoration: none;
}

<div class="container">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <div class="row pisti-products-wrapper">
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
       <img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
       <p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
       <img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
       <p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
       <img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
       <p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
       <img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
       <p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
       <img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
       <p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
       <img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
       <p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
       <img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
       <p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
  </div>
</div>

I have tried to replace the array [0] into [i]. But it looks like not working. I also did a console.log(i); in my function. But it seems like the i is undefined.

Make `i` block-scoped with `let`, then pass it to your two lower functions in the handler (or, even better, avoid `for` loops entirely, they're nasty, use `forEach` instead) — CertainPerformance, May 28 '19 at 05:43
You are doing two mistakes you can check here https://www.w3schools.com/code/tryit.asp?filename=G4H11MKV9JFF — Shubham Shendage, May 28 '19 at 06:09
@ShubhamShendage, it work like charm! But I not quit understand the `e` and `this`. — Anderson Koh, May 28 '19 at 06:41
When you bind a event handler then this gives you the element to which you are binding the event. And e is just parameter to catch value of this — Shubham Shendage, May 28 '19 at 06:42
I get your mean for `e`. It can be anything. How about if I do `for loop` with this: `pistiProductA[i].addEventListener("mouseover", mouseOver(this));` — Anderson Koh, May 28 '19 at 06:50

How to proper use "For Loop and Event Listeners" in JavaScript

0 Answers0