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

427 views Asked by At

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?

2

There are 2 answers

0
Jumar Juaton On BEST ANSWER

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.

0
theVelja On

Continue does't exist outside of the loops. The simplest solution for you is to add a condition inside increment/decrement where you would check if the current value is -1/1 and add additional logic in those cases :)