Add Event Listeners to different buttons depending on if condition

Question

I have been trying to build a simple products page where there is a product. All I wanted to do simply is when I click the "add to basket" button of a certain product, it only increments the total of this product number. Problem with my code is that simply clicking on any add to basket button will increment all products no matter what. What is wrong with my code?

 $( document ).ready(function() {

   var Product = function(name,price,counter) {
   this.name = name;
   this.price = price;
   this.counter = counter;
   // this.button = button;
   }

   Product.prototype.addToBasket = function(){
    return this.counter.innerHTML++;
   }


   //Products, addtobasket buttons and removefrombasket buttons
   var allProducts = document.querySelectorAll('.product');
   var productRed = document.querySelector('.productred');
   var productBlue = document.querySelector('.productblue')
   var addBtn = document.querySelectorAll('.addtobasket');
   var rmvBtn = document.querySelectorAll('.removefrombasket')
   
   //Red Product
   var redProductPrice = $('#red .price-tag');
   var redProductCounter = document.getElementById('red-counter');
   var redProductElement = document.getElementById('red');
   var redProduct = new Product(redProductElement,redProductPrice.html(),redProductCounter);

   //Blue Product
   var blueProductPrice = $('#blue .price-tag');
   var blueProductCounter = document.getElementById('blue-counter');
   var blueProductElement = document.getElementById('blue');
   var blueProduct = new Product(blueProductElement,blueProductPrice.html(),blueProductCounter);

   var clickBtn = function(obj) {
    for (var i = 0; i < allProducts.length ; i++) {
     var currentBtn = addBtn[i];
     if(currentBtn.parentElement.className === 'product productred') {
      currentBtn.addEventListener('click', function(e){
      e.preventDefault();
      obj.addToBasket();
     }, false)
     }

     else if(currentBtn.parentElement.className === 'product productblue') {
      currentBtn.addEventListener('click', function(e){
      e.preventDefault();
      obj.addToBasket();
     }, false)
     }
    }
   }

   clickBtn(redProduct);
   clickBtn(blueProduct);

 });

  body {
   width: 1060px;
   margin: 10px auto;
   font-family: "Arial",sans-serif;
  }

  .column {
   margin-top: 50px;
   width: 100%;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: -o-flex;
   display: flex;
   justify-content: center;
  }

  .productred,
  .productblue {
   /*position: absolute;*/
   /*top: 50px;*/
   display: block;
   margin: 10px;
   border: 0.5px solid;
   width: 30%;
   min-height: 300px;
   text-align: center;
  }

  .productred .addtobasket,
  .productred .removefrombasket,
  .productblue .addtobasket,
  .productblue .removefrombasket {
   position: relative;
   top: 105%;
  }

  .checkoutdiv {
   margin-top: 50px;
  }

  .productred .price-text,
  .productblue .price-text {
   position: fixed;
   top: 30%;
   color: white;
  }

  .productred .counter,
  .productblue .counter {
   position: absolute;
   top: 28%;
   margin-left: 290px;
   /*left: 38%;*/
   color: yellow;
   border: 1px solid;
   padding: 5px;
  }

  #red {
   background-color: red;
  }

  #blue {
   background-color: blue;
  }

  #green {
   background-color: green;
  }

<!DOCTYPE html>
<html lang="en">
<head>
 <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous">
    </script>
 <meta charset="UTF-8">
 <title>Order Page</title>
</head>
<body>
 <main id="container">

  <div class="column">
   <div class="product productred" id="red">
    <p class="price-text"> Price: <span class='price-tag'>10</span></p>
    <p id='red-counter' class="counter">0</p>
    <button class="addtobasket red">Add to Basket</button>
   </div>

   <div class="product productblue" id="blue">
    <p class="price-text"> Price: <span class='price-tag'>15</span> </p>
    <p id='blue-counter' class="counter">0</p>
    <button class="addtobasket blue">Add to Basket</button>
   </div>


 </main>

</body>
</html>

See http://stackoverflow.com/q/6487366/215552, http://stackoverflow.com/q/1451009/215552, http://stackoverflow.com/q/750486/215552 for information on why running functions (adding event handlers) is a bad idea in a loop, and what can be done to mitigate. — Heretic Monkey, Apr 05 '17 at 17:17
sorry I did not understand. May you highlight the problem with my given example? — Ahmed Magdy, Apr 05 '17 at 17:29

Add Event Listeners to different buttons depending on if condition

0 Answers0