求助：为按钮递增数字的代码添加数值达标后显示文本的条件

我们可以通过添加条件判断逻辑，在数字达到设定值时触发文本显示，同时还能做一些优化比如禁用按钮防止重复操作。以下是修改后的完整代码：

完整代码 #

HTML 部分

<div id="compteur"></div>
<div id="btn" ontouchstart ontouchend>点击递增</div>
<!-- 新增用于展示提示文本的容器 -->
<div id="tip-message" style="display: none; margin-top: 10px; color: #2ecc71; font-weight: bold;"></div>

JavaScript 部分

const incrementBtn = document.getElementById("btn");
const countDisplay = document.getElementById("compteur");
const tipMessage = document.getElementById("tip-message");

// 自定义设定值和触发后显示的文本
const targetNumber = 10;
const triggerText = "数字已达到设定值！";

let currentCount = 0;
countDisplay.innerHTML = currentCount;

const handleIncrement = () => {
  currentCount++;
  countDisplay.innerHTML = currentCount;

  // 判断是否达到设定值
  if (currentCount === targetNumber) {
    tipMessage.textContent = triggerText;
    tipMessage.style.display = "block";
    // 可选：禁用按钮，避免继续点击递增
    incrementBtn.disabled = true;
    incrementBtn.style.opacity = "0.6";
    incrementBtn.style.cursor = "not-allowed";
  }
};

incrementBtn.addEventListener("click", handleIncrement);

核心修改说明 #

• 新增tip-message容器，用于存放触发后的提示文本，初始状态隐藏
• 定义targetNumber（目标设定值）和triggerText（触发显示的文本），方便后续修改参数
• 在递增函数中加入条件判断，当当前数字等于设定值时，显示提示文本
• 可选优化：达到目标后禁用按钮并调整样式，防止用户重复触发递增操作

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