What is the best way to retrieve a specific property or attribute of a specific div element after obtaining it from e.target.parentNode?

Question

What is the best way to retrieve a specific property or attribute of a specific div element after obtaining it from e.target.parentNode?

e.target.parentNode will return this element.

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

Now, the challenge is to change the count of the "product_count" class in only this specific div after identifying it through e.target.parentNode. This task becomes more complex considering there are multiple similar div elements like the one shown above. How can we accurately target and modify the count of just the desired div?

javascript

Answer 1

Answer №1

e.target.parentNode retrieves the parent element of the target that triggered the event. You can then utilize any of the following methods to select the .product_Count element:

```
.querySelector('.product_Count');
```

.getElementsByClassName('product_Count')[0];

The above functions will target the .product_Count element within the parent element returned by e.target.parentNode. To modify the count, you can use either of the following:

.innerHTML
.textContent

If there are multiple div elements with the .quantity class, instead of adding event listeners individually on each .glyphicon element, you might consider leveraging event bubbling and attaching a single click event listener to the parent element encompassing all .quantity elements.

Refer to the demonstration below showcasing how you can increase/decrease the count when there are numerous .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>

To prevent negative counts, ensure that count updates only occur if the value does not go below zero after decrementing.

Answer 2

e.target.parentNode retrieves the parent element of the target that triggered the event. You can then utilize any of the following methods to select the .product_Count element:

```
.querySelector('.product_Count');
```

.getElementsByClassName('product_Count')[0];

The above functions will target the .product_Count element within the parent element returned by e.target.parentNode. To modify the count, you can use either of the following:

.innerHTML
.textContent

If there are multiple div elements with the .quantity class, instead of adding event listeners individually on each .glyphicon element, you might consider leveraging event bubbling and attaching a single click event listener to the parent element encompassing all .quantity elements.

Refer to the demonstration below showcasing how you can increase/decrease the count when there are numerous .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>

To prevent negative counts, ensure that count updates only occur if the value does not go below zero after decrementing.

Answer 3

Answer №2

Perhaps you are looking to increase the product count when the plus symbol is clicked? You can achieve this by utilizing e.target.nextElementSibling and e.target.previousElementSibling to target the product count element. Then, simply update its text using `elem.text = 'foobar'.

If they happen to click the minus symbol,

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

For increasing the count when the plus symbol is clicked,

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

This method will work seamlessly even if there are multiple divs with the class name quantity.

Answer 4

Perhaps you are looking to increase the product count when the plus symbol is clicked? You can achieve this by utilizing e.target.nextElementSibling and e.target.previousElementSibling to target the product count element. Then, simply update its text using `elem.text = 'foobar'.

If they happen to click the minus symbol,

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

For increasing the count when the plus symbol is clicked,

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

This method will work seamlessly even if there are multiple divs with the class name quantity.

What is the best way to retrieve a specific property or attribute of a specific div element after obtaining it from e.target.parentNode?

Answer №1

Answer №2

Similar questions

Issue with external variable not being updated properly in success callback

Having trouble installing Bootstrap using the `npm i bootstrap` command? It seems like the

The alignment issue persists when attempting to set 'relative' on the parent and 'absolute' on the inner element in a Bootstrap column for bottom alignment

What steps can be taken to restrict a user's access to a route through URL parameters?

Tips for Implementing {{ }} within Angular Filters in Nested ng-repeat statements

Incorporate PNG files with pre-defined labels in a React element

Following a Node/Npm Update, Sails.js encounters difficulty locating the 'ini' module

Tips for preventing NextJS from including a dynamically imported component in the main _app.js bundle while utilizing Module Aliases

What is the best way to create dynamic .env files that can easily adapt to different environments instead of

What is the process for adding new data to a data source without overwriting existing information?

Exploring Parameters to Customize Search Results in React

What is the best way to add clickable links to 3D objects and meshes with ThREE?

Error message: When attempting to create dynamic inputs in React, an error occurs stating that instance.render is not

What is the best way to position a <td> element within a table row underneath another <td>?

What is the best way to link my PHP with MySQL in order to execute an AJAX query?

What is the best method to collect information from multiple AJAX requests?

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

Executing an external function on an element as soon as it is created in AngularJS: tips and tricks

What is the best approach for designing the architecture of a server-side node.js application?

"Learn how to dynamically update the user interface in express.js using handlebars without having to refresh the