javascript - Correct use of currentTarget for a click event jQuery

I built this little example. I have some elements and for some of this there is a discount of 15%. I want to push this value (15% of the price) into an Array when "buy" is pressed and only if the pressed item has a discount.

The idea was to use currentTarget to recognize which item has a discount and which not, but my function returns in the console always the same message: "This item has NO discount" and of course nothing is pushed into the array.

I'm using currentTarget in a wrong way? I tried to use also $(this) instead of e.currentTarget but nothing changed.

$(document).ready(function(e){
  var $event = $(e.currentTarget).closest('.event');
  var discountCustomer = [];

  function addItem() {
    if($event.find('.discount').length) {
      var $discount = ((parseInt($event.find('.price').text()))*15)/100;
      console.log($discount);
      discountCustomer.push($discount);
      
      $totalDiscount=0;
      for (var i = 0; i < discountCustomer.length; i++) {
        $totalDiscount += discountCustomer[i] << 0;
      }
      
      $('.totalDiscount').html(($totalDiscount) + ' €');
      
    } else {
      console.log('This seminar has NO discount');
    }
    console.log(discountCustomer);
  }

  $('.buy').click(function() {
    addItem();
    })
})

.event {
  border: 1px solid black;
  padding: 3px;
  height: 20px;
  width: 400px;
  margin-bottom: 10px;
}

.event > * {
  float: left;
  margin-right: 15px;
}

.total > * {
  float: left;
}

.totalDiscount {
  margin-left: 10px;
}

.clear {
  clear: both;
}

<script src=".1.1/jquery.min.js"></script>
<div class="event">
  <div class="item">Item 1</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 2</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 3</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
  <p>Total Discount: </p>
  <p class="totalDiscount"></p>
</div>

I'm using currentTarget in a wrong way? I tried to use also $(this) instead of e.currentTarget but nothing changed.

$(document).ready(function(e){
  var $event = $(e.currentTarget).closest('.event');
  var discountCustomer = [];

  function addItem() {
    if($event.find('.discount').length) {
      var $discount = ((parseInt($event.find('.price').text()))*15)/100;
      console.log($discount);
      discountCustomer.push($discount);
      
      $totalDiscount=0;
      for (var i = 0; i < discountCustomer.length; i++) {
        $totalDiscount += discountCustomer[i] << 0;
      }
      
      $('.totalDiscount').html(($totalDiscount) + ' €');
      
    } else {
      console.log('This seminar has NO discount');
    }
    console.log(discountCustomer);
  }

  $('.buy').click(function() {
    addItem();
    })
})

.event {
  border: 1px solid black;
  padding: 3px;
  height: 20px;
  width: 400px;
  margin-bottom: 10px;
}

.event > * {
  float: left;
  margin-right: 15px;
}

.total > * {
  float: left;
}

.totalDiscount {
  margin-left: 10px;
}

.clear {
  clear: both;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <div class="item">Item 1</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 2</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 3</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
  <p>Total Discount: </p>
  <p class="totalDiscount"></p>
</div>

Share Improve this question edited Feb 11, 2021 at 22:24 Jason Aller 3,65228 gold badges41 silver badges39 bronze badges asked Dec 12, 2017 at 13:00 Danny_DD 7961 gold badge15 silver badges37 bronze badges

Does ready take an event variable? I think the execution is flawed. Event variables are populated on click, mouseover, etc, but I don't think ready does this. – Bryant Makes Programs Commented Dec 12, 2017 at 13:04
Also, just a thought, but if you're querying the DOM for information (such as discounts) you're going to build a product that's hard to maintain and open for manipulation. Pricing information should probably be stored in an array and retrieved from the API. This makes it easier to query the information you're looking for. – Bryant Makes Programs Commented Dec 12, 2017 at 13:09
Yes, but the project where i'm working now has this kind of approach and I can't change it. That's why I have to make it work in this way. – Danny_DD Commented Dec 12, 2017 at 13:11
Ah gotcha, understood :) The two posted answers should give you what you need then. Just gotta capture the event where it's actually capturable :P – Bryant Makes Programs Commented Dec 12, 2017 at 13:16

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You should pass e to the addItem function also var $event = $(e.currentTarget).closest('.event'); should e inside addItem function

$(document).ready(function(){
  
    var discountCustomer = [];

  function addItem(e) {
    var $event = $(e.currentTarget).closest('.event');
    if($event.find('.discount').length) {
      var $discount = ((parseInt($event.find('.price').text()))*15)/100;
      console.log($discount);
      discountCustomer.push($discount);
      
      $totalDiscount=0;
      for (var i = 0; i < discountCustomer.length; i++) {
        $totalDiscount += discountCustomer[i] << 0;
      }
      
      $('.totalDiscount').html(($totalDiscount) + ' €');
      
    } else {
      console.log('This seminar has NO discount');
    }
    console.log(discountCustomer);
  }

  $('.buy').click(function(e) {
    addItem(e);
	})
})

.event {
  border: 1px solid black;
  padding: 3px;
  height: 20px;
  width: 400px;
  margin-bottom: 10px;
}

.event > * {
  float: left;
  margin-right: 15px;
}

.total > * {
  float: left;
}

.totalDiscount {
  margin-left: 10px;
}

.clear {
  clear: both;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <div class="item">Item 1</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 2</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 3</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
  <p>Total Discount: </p>
  <p class="totalDiscount"></p>
</div>

You are not capturing the click event, I did this little modification to capture it (and passing the current element) to addItem function... Hope it helps!

$(document).ready(function(e){
  
  var discountCustomer = [];

  function addItem($event) {
    if($event.find('.discount').length) {
      var $discount = ((parseInt($event.find('.price').text()))*15)/100;
      console.log($discount);
      discountCustomer.push($discount);
      
      $totalDiscount=0;
      for (var i = 0; i < discountCustomer.length; i++) {
        $totalDiscount += discountCustomer[i] << 0;
      }
      
      $('.totalDiscount').html(($totalDiscount) + ' €');
      
    } else {
      console.log('This seminar has NO discount');
    }
    console.log(discountCustomer);
  }

  $('.buy').click(function(e) {
  var $event = $(e.target).closest('.event');
    addItem($event);
	})
})

.event {
  border: 1px solid black;
  padding: 3px;
  height: 20px;
  width: 400px;
  margin-bottom: 10px;
}

.event > * {
  float: left;
  margin-right: 15px;
}

.total > * {
  float: left;
}

.totalDiscount {
  margin-left: 10px;
}

.clear {
  clear: both;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <div class="item">Item 1</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 2</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
  <div class="item">Item 3</div>
  <div class="discount">This seminar has a discount!</div>
  <div class="price">10 €</div>
  <button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
  <p>Total Discount: </p>
  <p class="totalDiscount"></p>
</div>

Programmer puzzle solving

javascript - Correct use of currentTarget for a click event jQuery - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)