如何实现计数器递减时保持非负，返回0而非undefined？

当前计数器的递增功能正常，但递减到0后继续点击减号按钮，页面会显示undefined。原因是sub函数仅在counter >= 1时执行递减并返回值，当counter为0时函数没有返回值，导致赋值给DOM元素的内容为undefined。

解决方案 #

修改sub函数，确保无论counter当前值是多少，函数都返回有效数值，同时保证counter不会低于0。以下是两种简洁的实现方式：

方式一：使用Math.max限制最小值

let counter = 0;

const add = (function() {
  return function() {
    counter += 1;
    return counter;
  }
})();
const sub = (function() {
  return function() {
    counter = Math.max(0, counter - 1); // 强制counter最小为0
    return counter;
  }
})();

function addFunction() {
  document.getElementById("demo").innerHTML = add();
}

function subFunction() {
  document.getElementById("demo").innerHTML = sub();
}

方式二：保留原判断逻辑，始终返回counter

let counter = 0;

const add = (function() {
  return function() {
    counter += 1;
    return counter;
  }
})();
const sub = (function() {
  return function() {
    if (counter >= 1) {
      counter -= 1;
    }
    return counter; // 无论是否执行递减，都返回当前counter值
  }
})();

function addFunction() {
  document.getElementById("demo").innerHTML = add();
}

function subFunction() {
  document.getElementById("demo").innerHTML = sub();
}

两种方式都能避免undefined的出现，同时让计数器停留在0不再继续递减，CSS和HTML代码无需修改。

内容的提问来源于stack exchange，提问作者mmirbekian