字符数达100时显示提交按钮的实现故障排查

你的代码存在两个核心问题，导致输入字符达到100个时按钮无法正常显示：

• 按钮显示的判断逻辑仅在页面加载时执行一次，没有绑定到输入事件上，输入字符过程中不会重新触发判断
• counter是countCharacters函数的局部变量，全局作用域无法访问，会直接导致报错

修复后的完整代码 #

<textarea name="tweet" id="textbox" rows="13" cols="70" placeholder="" maxlength="250"></textarea><br>
<span id="char_count">0/250</span>

<br><br><br>
<div>
  <button class="NextStep" id="buton" style="display:none" onclick="NextStep()">Finalizare Curs</button>
</div>

<script>
let textArea = document.getElementById("textbox");
let characterCounter = document.getElementById("char_count");
const maxNumOfChars = 250;
const submitButton = document.getElementById("buton");

const countCharacters = () => {
  let numOfEnteredChars = textArea.value.length;
  characterCounter.textContent = `${numOfEnteredChars}/${maxNumOfChars}`;
  
  // 实时判断字符数，控制按钮显示/隐藏
  submitButton.style.display = numOfEnteredChars >= 100 ? "block" : "none";
};

// 绑定输入事件，每次输入都触发计数和按钮状态更新
textArea.addEventListener("input", countCharacters);

// 页面加载时执行一次，确保初始状态正确
countCharacters();
</script>

<script>
function NextStep() {
  location.href = "Cursuri.html";
}
</script>

关键修改说明 #

1. 将按钮状态判断移入输入事件处理函数：每次用户输入字符时，都会同步判断字符数并更新按钮的显示状态
2. 简化计数逻辑：去掉多余的minNumOfChars变量，直接使用textArea.value.length获取当前输入长度
3. 初始化执行一次函数：页面加载时主动调用countCharacters，避免textarea已有内容时按钮状态异常
4. 优化变量命名：把text改为submitButton，提升代码可读性

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