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

Using the novalidate attribute in Angular 4.0.0

Issues with websockets functionality have been reported specifically in Firefox when trying to connect to multiple

Issues with Bootstrap tabs loading jQuery and Ajax are preventing the proper functionality

Unique Tags and Javascript: A customized approach

Creating an alert pop-up that displays text based on the prompt input type: A step-by-step guide

What is the reason for the clearInterval consistently functioning after the completion of the function?

Is there a way to find the JavaScript Window ID for my current window in order to utilize it with the select_window() function in

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Having difficulty sending a message from an AngularJS application to an Angular 10 application through an iframe

Having trouble with the authorization aspect of Next Auth. The error message reads: "NextAuth.js does not support the action api with HTTP GET method

Clicking on the menu in mobile view will cause it to slide upward

What strategies can be used to manage Error return types in Typescript?

Is it possible to attach a mouse click event to styled text?

Is there a way to toggle a single Reactstrap Collapse component?

Can anyone help me with fixing the error message 'Cannot assign to read-only property 'exports' of the object' in React?

Email notification will be sent upon form submission to Firestore

Can a MS Teams Bot be triggered to show a botMessagePreview from a task or submit activity rather than a composeExtension or submitAction activity?

Is it possible to automatically access the most recent Beta build through package.json and npm?

Setting up parameters and arguments in Vuex mutations: A guide

Pass multiple variables as input to a function, then query a JSON array to retrieve multiple array values as the output