输入框填内容后HTML按钮仍无法启用的问题排查与修复

你的代码核心问题是checkInput函数的条件判断完全写反了，导致输入内容后按钮依然处于禁用状态。

修正后的JavaScript代码 #

function checkInput() {
  var input = document.getElementById('username');
  var button = document.getElementById('saveScoreBtn');

  // 输入框内容（去除首尾空格）为空时禁用按钮，否则启用
  button.disabled = input.value.trim() === '';
}

修正说明 #

1. 逻辑纠正：原代码中当输入框不为空时，错误地设置button.disabled = true（禁用按钮），现在反过来，当输入框内容（用trim()过滤首尾空格，避免纯空格的无效输入）为空时才禁用按钮，否则按钮自动启用。
2. 简化写法：直接将判断结果赋值给button.disabled，比if-else逻辑更简洁清晰。
3. HTML无需修改：你原来的HTML结构和onkeyup绑定、按钮初始disabled属性都没问题，保持原样即可。

如果想覆盖更多输入场景（比如右键粘贴内容），可以把输入框的onkeyup换成oninput，这样任何输入变化都会触发检查：

<input type="text" name="name" id="username"
    placeholder="Enter your name!" oninput="checkInput()" />

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