Decrement class by 1 on click in vanilla Javascript

Question

I currently have an increment and decrement methods on 2 buttons. My increment function is firing fine however my decrement method is failing. I want to subtract just from the variable so an example would be if I had the class "move2" and fired the decrement method I would get "move1" and so on...d

Any thoughts?

let i = 0;

const increment = (div) => {
    document.getElementById(div).classList.remove("move" + i++);
    document.getElementById(div).classList.add("move" + i); 
}

const decrement = (div) => {
    var hasClass = document.getElementById(div).classList.contains('move1', 'move2')
    if(hasClass === true)
        document.getElementById(div).classList.remove("move" + i--);
}

`i++` (increment postfix operator) returns `i`, *then* increments `i`. Similarly with `i--`. If you want to decrement and use the decremented value, use `--i` ( [decrement prefix operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement) ) — Heretic Monkey, Jun 06 '18 at 21:43
What happens when you decrement 0? Does the class become `move-1`? — fubar, Jun 06 '18 at 21:44
`decrement` should be just like `increment`, except you change `++` to `--`. — Barmar, Jun 06 '18 at 21:44
See also [Why avoid increment ("++") and decrement ("--") operators in JavaScript?](https://stackoverflow.com/q/971312) — Heretic Monkey, Jun 06 '18 at 21:44
Except you might want to check whether `i == 0` so it doesn't go negative. — Barmar, Jun 06 '18 at 22:44

score 1 · Accepted Answer · answered Jun 06 '18 at 22:53

As @MikeMcCaughan mentioned, you need to use --i instead of i-- to use the decremented value on your class name. Also, your current boolean variable hasClass returns true only if the div has a class of class1 or class2. class3 and above returns false again.

Instead of using contains() you can use indexOf() instead to check the element class name and if it returns true, you can then use the .classList.replace() method to update the classname to the decremented value.

const decrement = (div) => {
   let className = document.getElementById('x').getAttribute("class"); // get element class value
   let hasClass = className.indexOf('move') >= 0; // returns true if class value has "move" in it
    if(hasClass === true)
      document.getElementById('x').classList.replace((className),("move" + --i));     // replace the class value with the decremented class name
}

jsFiddle with the above approach: https://jsfiddle.net/AndrewL64/rdjv5hsm/11/

Also if you want to cap the decrement at 0, you can edit the if condition from:

if(hasClass === true) {
    document.getElementById('x').classList.replace((className),("move" + --i));
}

To:

if(hasClass === true && i > 0) {
    document.getElementById('x').classList.replace((className),("move" + --i));
}

jsFiddle with decrement capping: https://jsfiddle.net/AndrewL64/rdjv5hsm/14/

Decrement class by 1 on click in vanilla Javascript

1 Answers1