How To Increase, Decrease And Reset The Counter In Dynamic Web Application

December 01, 2023 Post a Comment

Here we have counter application to increase, decrease and reset the counter by using HTML, CSS, and JavaScript, but I can't getting to do how we can increase the counter and decre

Solution 1:

I am new to js so may not be best solution.

let count = 0;
const counter = document.getElementById("counterValue");

functionisEven(num) {
    return num % 2 ? false : true;
}

functiononDecrement() {
    if (isEven(count)) {
        count = count - 2;
    } else {
        count = count - 1;
    }
    counter.textContent = count;
}

functiononReset() {
    count = 0;
    counter.textContent = count;
}

functiononIncrement() {
    if (isEven(count)) {
        count = count + 5;
    } else {
        count = count + 10;
    }
    counter.textContent = count;
}

.counter-value {
  font-size: 36px;
  font-weight: 900;
}

.button {
  color: #ffffff;
  background-color: #0967d2;
  font-size: 14px;
  border-width: 0;
  border-radius: 4px;
  padding: 10px;
}

<!DOCTYPE html><html><head></head><body><pid="counterValue"class="counter-value">0</p><buttonid="decreaseBtn"class="button"onclick="onDecrement()">DECREASE</button><buttonid="resetBtn"class="button"onclick="onReset()">RESET</button><buttonid="increaseBtn"class="button"onclick="onIncrement()">INCREASE</button></body></html>

Solution 2:

The other users in the comments have explained about how to check whether the count is odd or even.

I wanted to add an answer that approaches the code from a slightly different angle, and which I often find very useful.

Instead of picking up the textContent of the counter element and parsing it to a number we maintain one number variable.

We give each button a data-type attribute, and a button container one handler function that is called immeditately.

Baca Juga

The reason for this is so we can use a technique called a closure - a function returned from another function but maintains references to the variables that were declared before it was returned.

We can intitialise count.
We return the closure.
When any button is clicked the event bubbles up the DOM and is captured by the listener in the container (this is called event delegation.
We check the data type. We update count based on the type and whether the count is odd or even.
Finally we update the counter element text.

// Cache the elementsconst counterElement = document.querySelector('#counterValue');
const container = document.querySelector('#container');

// Add a listener to the container
container.addEventListener('click', handleClick(), false);

// Small function to check whether the// count is odd or evenfunctionisEven(count) {
  return count % 2 === 0;
}

// Initialise the count variablefunctionhandleClick(count = 0) {

  // Return a new function (the closure)// as the function that will be called when// the buttons are clickedreturnfunction(e) {

    // Get the button type from the clicked buttonconst { type } = e.target.dataset;

    // Now just use `switch` to update the countswitch(type) {
      case'decrease': {
        if (isEven(count)) {
          count = count - 2;
        } else {
          count = count - 1;
        }
        break;
      }
      case'increase': {
        if (isEven(count)) {
          count = count + 5;
        } else {
          count = count + 10;
        }
        break;
      }
      default:
      case'reset': count = 0; break;
    }

    // Finally update the counter element
    counterElement.textContent = count;
  }
}

.counter-value {font-size: 36px; font-weight: 900; }
.button {color: #ffffff; background-color: #0967d2; font-size: 14px; border-width: 0; border-radius: 4px; padding: 10px;}

<pid="counterValue"class="counter-value">0</p><divid="container"><buttondata-type="decrease"class="button">DECREASE</button><buttondata-type="reset"class="button">RESET</button><buttondata-type="increase"class="button">INCREASE</button></div>

JavaScript General

How To Increase, Decrease And Reset The Counter In Dynamic Web Application

Solution 1:

I am new to js so may not be best solution.

Solution 2:

Post a Comment for "How To Increase, Decrease And Reset The Counter In Dynamic Web Application"