how can we access some property/attribute of particular div after getting it from e.target.parentNode

Viewed 57

e.target.parentNode return this

    <div class="quantity">
        <span class="glyphicon glyphicon-minus-sign"></span>
        <span class="product_Count"> 4 </span>
        <span class="glyphicon glyphicon-plus-sign"></span>
    </div>

So how can we change count of "product_count" class? Remember there are multiple div same as above so how can we change count of only this div after getting it from e.target.parentNode?

2 Answers

e.target.parentNode will return the parent of the target element which triggered the event. On the returned parent element, you can use any of the following functions to select the .product_Count element

  • .querySelector('.product_Count');
  • .getElementsByClassName('product_Count')[0];

Above functions will select the .product_Count element within the element returned by e.target.parentNode. To update the count, use any of the following:

  • .innerHTML
  • .textContent

As mentioned in your question that there are multiple div elements with .quantity class, so instead of adding event listeners on individual .glyphicon elements, you could take advantage of event bubbling and add a single click event listener on the parent element of all the .quantity elements.

See the snippet below which shows how you could increment/decrement count when there are more than one .quantity elements

const container = document.querySelector('.container');

container.addEventListener('click', (e) => {
  const target = e.target;

  if (target.matches('.glyphicon')) {
    const parentEl = target.closest('.quantity');
    const countEl = parentEl.querySelector('.product_Count');
    let count = Number(countEl.textContent);

    if (target.matches('.minus')) {
      count -= 1;
    } else {
      count += 1;
    }

    countEl.textContent = count;
  }
});
.glyphicon {
  border: 1px solid;
  padding: 0 5px;
  cursor: pointer;
}
<div class="container">

  <div class="quantity">
    <span class="glyphicon minus">-</span>
    <span class="product_Count"> 4 </span>
    <span class="glyphicon plus">+</span>
  </div>

  <br/>

  <div class="quantity">
    <span class="glyphicon minus">-</span>
    <span class="product_Count"> 2 </span>
    <span class="glyphicon plus">+</span>
  </div>

</div>

If you don't want the count to be negative, make sure that you only update the count if after decrement, its value is not less than zero.

I'm guessing you want to increment the product count when someone clicks the plus sign? You should use e.target.nextElementSibling and e.target.previousElementSibling to select the product count element. Then, you can update its text using `elem.text = 'foobar'.

So if they click the minus sign,

function onMinusClicked(event){
  let num = parseInt(event.target.nextElementSibling.text);
  event.target.nextElementSibling.text = num - 1;
}

and for the plus sign,

function onPlusClicked(event){
  let num = parseInt(event.target.previousElementSibling.text);
  event.target.previousElementSibling.text = num + 1;
}

This solution works even if there are multiple divs with class quantity.

Related