实现计数器id="clicks"数值正负对应颜色切换及状态文本显示

首先修复原代码的核心问题：你重复声明了var clicks = 0，导致clickplus和clickless函数各自维护独立的计数器，状态无法共享。接下来实现颜色切换和文本追加的需求，以下是完整实现：

修改后的完整代码 #

HTML #

<body style="background-color:#F0F0F0">
  <center>
    <br><br><br>
    <h1>
      <p style="color:#002244">COUNT: <span id="clicks">0</span></p>
    </h1>
    <button id="btn_plus" type="button" onClick="clickplus()">+1</button>
    <button id="btn_less" type="button" onClick="clickless()">-1</button>
  </center>
</body>

注：将原HTML中的<a id="clicks">改为<span>更合适，因为此处并非链接用途。

CSS #

#btn_plus{
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
#btn_less{
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.positive {
  color: green;
}
.negative {
  color: red;
}

JavaScript #

// 全局声明计数器变量，确保两个函数共享同一状态
let clicks = 0;
const clicksElement = document.getElementById("clicks");

// 封装更新显示逻辑，避免重复代码
function updateDisplay() {
  // 重置内容，防止重复追加文本
  clicksElement.textContent = clicks;
  
  // 根据数值状态切换样式和追加文本
  if (clicks > 0) {
    clicksElement.className = "positive";
    clicksElement.textContent += " (positive)";
  } else if (clicks < 0) {
    clicksElement.className = "negative";
    clicksElement.textContent += " (negative)";
  } else {
    // 数值为0时清除样式和额外文本
    clicksElement.className = "";
  }
}

function clickplus() {
  clicks += 1;
  updateDisplay();
}

function clickless() {
  clicks -= 1;
  updateDisplay();
}

// 页面加载时初始化显示状态
updateDisplay();

关键说明 #

• 共享计数器状态：将clicks变量全局声明且仅声明一次，确保两个按钮操作的是同一个数值。
• 统一更新逻辑：用updateDisplay函数集中处理数值显示、颜色切换和文本追加，减少冗余代码。
• 样式规范：通过CSS类控制颜色，比直接操作内联样式更易维护和复用。
• 初始状态处理：页面加载时调用updateDisplay，确保初始的0状态显示正确。

内容的提问来源于stack exchange，提问作者Otávio Barreto