Use Javascript function to span class that is in that particular class the button was clicked

Question

I have a shopping cart that is based on javascript. There are multiple cartrows with each the same plus and minus button. I've got these 2 simple function which adds 1 or reduces it by 1, depends on the button that is clicked.

function plus() {
  var spanclass = document.getElementById('hoeveel')
  var count = spanclass.innerHTML;
  count++;
  document.getElementById('hoeveel').innerHTML = count;
}

function minus() {
  var spanclass = document.getElementById('hoeveel')
  var count = spanclass.innerHTML;
  if (count > 1) {
    count--;
    document.getElementById('hoeveel').innerHTML = count;
  }
}

This works, but not when there is more than 1 item in the cart. When the plus button gets clicked on the second item in the cart the quantity of the first item gets changed.

My question here is, is it possible to only change the span class that is in the same "cartrow" class the button was clicked in?

use a common class instead of an ID and use a proper event handler to change the span in reference to the clicked element — empiric
– empiric, Commented May 19, 2020 at 12:55
use context of the element ur clicking, like pass this value or use events — jsduniya
– jsduniya, Commented May 19, 2020 at 13:10
You shoul really dig into 'javascript eventListener', especially the parameters. Create a generic 'listener' and query the event:target from the passed event parameter. E.g. MDN: Event.target — Rene van der Lende
– Rene van der Lende, Commented May 19, 2020 at 13:17

mhSangar · Accepted Answer · 2020-05-22 12:22:33Z

2

The selection with getElementById is supposed to be unique on the page, so it only returns the first occurrence, which is the first item on the cart. If you want to select each of the items differently, you should use a common class (cart-item) and a different identifier (item-001, item-002...) for each item.

var item = document.getElementsByClassName("cart-item").getElementById("item-001");

Edit: To know which button was clicked, you can use the onclick event:

function plus(event) {
  var count = event.target.innerHTML;
  count++;
  event.target.innerHTML = count;
}

function minus(event) {
  var count = event.target.innerHTML;
  if (count > 1) {
    count--;
    event.target.innerHTML = count;
  }
}

edited May 22, 2020 at 12:22

user11141611

answered May 19, 2020 at 12:56

mhSangar

4673 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lucdabomb Over a year ago

Hi, thanks for the answer. This does not solve the problem though. Because now I still don't know which button of all the 'cartrow' classes was clicked.

mhSangar Over a year ago

Hi Luc! To know which button was clicked, I think you could use the event of the click in both functions. I'll edit my response so you can see it more clear.

Rene van der Lende Over a year ago

You might want to turn the innerHTML to number() as it is a string. But JS may be forgiving, I always forget.

Lucdabomb Over a year ago

Hi @mhSangar, i've been struggling the whole afternoon. The answer of jsduniya helped me a lot though and fixed the problem for me! I couldn't get the events to work, but this will do the deal. Thanks a lot for your help. I got a lot of learning to do haha

jsduniya · Accepted Answer · 2020-05-19 16:31:36Z

You Can try something like this.. they are many way we can solve this.

function increment(ele,flag){

 var spanElement = flag ? ele.previousSibling : ele.nextSibling;
 var count = parseInt(spanElement.innerHTML);
 if(flag) {
   count = count+1;
 } else {
   count = count-1;
 }
  spanElement.innerHTML = parseInt(count);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  
  <button onclick="increment(this,false)">-</button><span class="count">0</span><button onclick="increment(this,true)">+</button>
  <br>
  <button onclick="increment(this, false)">-</button><span class="count">1</span><button onclick="increment(this, true)">+</button>

</body>
</html>

Collectives™ on Stack Overflow

Use Javascript function to span class that is in that particular class the button was clicked

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related