如何在动态 Web 应用程序中增加、减少和重置计数器

Question

这里我们有计数器应用程序通过使用 HTML、CSS 和 JavaScript 来增加、减少和重置计数器，但我无法做到我们可以增加计数器并减少计数器并重置计数器。

当点击id为decreaseBtn的HTML按钮元素时，如果计数为奇数，则将计数器值减少 -1，如图所示。如果计数为偶数，则将计数器值减少 -2，如图所示。
点击id为increaseBtn的HTML按钮元素时，如果计数为奇数，则将计数器值增加 10，如镜像所显示。如果计数为偶数，则将计数器值增加 5，如图所示。
点击id为resetBtn的HTML按钮元素时，将计数器值设置为 0.

输出图像是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>

预期输出为 Counter app

Answer 1

评论中的其他用户已经解释了how to check whether the count is odd or even。

我想添加一个从稍微不同的角度处理代码的答案，我经常发现它非常有用。

我们维护一个数字变量，而不是获取计数器元素的 textContent 并将其解析为数字。

我们给每个按钮 a data-type attribute 和一个按钮容器一个立即调用的处理函数。

这样做的原因是我们可以使用一种称为 a closure 的技术 - 一个从另一个函数 return 编辑的函数，但保留对 之前声明的变量的引用 它是 returned.

我们可以初始化count。
我们return闭包。
单击任何按钮时，事件会在 DOM 中冒泡并被容器中的侦听器捕获（这称为 event delegation。
我们检查数据类型。我们根据类型和计数是奇数还是偶数来更新count。
最后我们更新计数器元素文本。

// 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>

Answer 2

我是 js 新手，所以可能不是最佳解决方案。

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

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

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

function onReset() {
    count = 0;
    counter.textContent = count;
}

function onIncrement() {
    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>
  <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>

如何在动态 Web 应用程序中增加、减少和重置计数器

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

javascript

dom

dom-events

我是 js 新手，所以可能不是最佳解决方案。