时间戳

首页 > 解决方案 > How to increase, decrease and reset the counter in dynamic web application

javascript - How to increase, decrease and reset the counter in dynamic web application

问题描述

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 decrease the counter and reset the counter.

The Output image is Counter app

let counterElement = document.getElementById("counterValue");

function onIncrement() {
  let previousCounterValue = counterElement.textContent;
  let updatedCounterValue = parseInt(previousCounterValue) + 1;
  if (updatedCounterValue > 0) {
    counterElement.style.color = "black";
  }
  else if (updatedCounterValue < 0) {
    counterElement.style.color = "black";
  }
  else {
    counterElement.style.color = "black";
  }
  counterElement.textContent = updatedCounterValue;
}

function onDecrement() {
  let previousCounterValue = counterElement.textContent;
  let updatedCounterValue = parseInt(previousCounterValue) - 1;
  if (updatedCounterValue > 0) {
    counterElement.style.color = "black";
  }
  else if (updatedCounterValue < 0) {
    counterElement.style.color = "black";
  }
  else {
    counterElement.style.color = "black";
  }
  counterElement.textContent = updatedCounterValue;
}

function onReset() {
  let counterValue = 0;
  counterElement.textContent = counterValue;
  counterElement.style.color = "black";
}
 @import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

.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>
    <p id="counterValue" class="counter-value">0</p>
    <button id="decreaseBtn" class="button" onclick="onDecrement()">DECREASE</button>
    <button id="resetBtn" class="button" onclick="onReset()">RESET</button>
    <button id="increaseBtn" class="button" onclick="onIncrement()">INCREASE</button>
</body>

</html>

Expected Output is Counter app

标签： javascriptdomdom-events

解决方案

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.

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.

  1. We can intitialise count.

  2. We return the closure.

  3. 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.

  4. We check the data type. We update count based on the type and whether the count is odd or even.

  5. Finally we update the counter element text.

// Cache the elements
const 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 even
function isEven(count) {
  return count % 2 === 0;
}

// Initialise the count variable
function handleClick(count = 0) {

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

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

    // Now just use `switch` to update the count
    switch(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;}
<p id="counterValue" class="counter-value">0</p>
<div id="container">
  <button data-type="decrease" class="button">DECREASE</button>
  <button data-type="reset" class="button">RESET</button>
  <button data-type="increase" class="button">INCREASE</button>
</div>

推荐阅读