javascriptoperatorshitcounter

Can you use decrement/increment operator but skip 0 in JavaScript just like how continue works?


I have here a number counter code where it has increment and decrement buttons. Whenever you click a button, it does its job of incrementing and decrementing the value of the input.

            // =number_counter
            function decrement(e) {
                const btn = e.target.parentNode.parentElement.querySelector(
                    'button[data-action="decrement"]'
                );
                const target = btn.nextElementSibling;
                let value = Number(target.value);
                value--;
                target.value = value;  
                toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);  
            }

            function increment(e) {
                const btn = e.target.parentNode.parentElement.querySelector(
                    'button[data-action="decrement"]'
                );
                const target = btn.nextElementSibling;
                let value = Number(target.value);
                value++;
                target.value = value;
                toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);
            }

            const decrementButtons = document.querySelectorAll(
                `button[data-action="decrement"]`
            );

            const incrementButtons = document.querySelectorAll(
                `button[data-action="increment"]`
            );

            decrementButtons.forEach(btn => {
                btn.addEventListener("click", decrement);
            });

            incrementButtons.forEach(btn => {
                btn.addEventListener("click", increment);
            });

This time, I wanted to skip 0 when clicking the buttons having the input value as either -1 or 1. Can I add a behavior such as continue; without the loop and just having increment/decrement operators?


Solution

  • The solution was just to set the value = 1 or value = -1;

    function decrement(e) {
        const btn = e.target.parentNode.parentElement.querySelector(
            'button[data-action="decrement"]'
        );
        const target = btn.nextElementSibling;
        let value = Number(target.value);
        value--;
    
        if (value == 0) {
            value = -1;
            target.value = value;
        } else {
            target.value = value;
        }
    
        toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);
    }
    
    function increment(e) {
        const btn = e.target.parentNode.parentElement.querySelector(
            'button[data-action="decrement"]'
        );
        const target = btn.nextElementSibling;
        let value = Number(target.value);
        value++;
    
        if (value == 0) {
            value = 1;
            target.value = value;
        } else {
            target.value = value;
        }
    
        toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);
    }
    

    Sorry I have missed it.