JavaScript实现：未输入用户名且未选难度单选框时禁用按钮

你的代码现在有两个关键问题导致逻辑出错：

1. document.getElementsByName("difficulty")返回的是一组单选框元素，无法直接通过.checked判断是否有选中项；
2. 原代码的两个if分开判断，导致只要满足单个条件就会错误修改按钮状态，没有同时校验两个必填条件。

修正后的代码 #

JavaScript部分 #

const startButton = document.getElementById("start-btn");
startButton.addEventListener('click', startQuiz);

function toggleButtonState() {
  // 检查用户名是否有效（去除首尾空格，避免仅输入空格的误判）
  const hasValidUsername = document.getElementById("username").value.trim() !== "";
  // 检查是否有难度单选框被选中
  const hasSelectedDifficulty = document.querySelector('input[name="difficulty"]:checked') !== null;
  
  // 仅当两个条件同时满足时，按钮才启用；否则保持禁用
  startButton.disabled = !(hasValidUsername && hasSelectedDifficulty);
}

HTML部分 #

<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" onkeyup="toggleButtonState()" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
  <div>
    <input type="radio" name="difficulty" id="easy-diff" onclick="toggleButtonState()">
    <label for="easy-diff">Easy</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="medium-diff" onclick="toggleButtonState()">
    <label for="medium-diff">Medium</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="hard-diff" onclick="toggleButtonState()">
    <label for="hard-diff">Hard</label>
  </div>
</div>

<button id="start-btn" type="submit" class="btn" disabled>Start</button>

核心优化说明 #

• 用trim()处理用户名输入，避免用户仅输入空格就被判定为已填写；
• 借助querySelector直接定位选中的单选框，比遍历元素集合更简洁高效；
• 合并条件判断逻辑，通过!(hasValidUsername && hasSelectedDifficulty)直接控制按钮禁用状态，确保只有用户名和难度选项都满足要求时，按钮才会启用。

内容的提问来源于stack exchange，提问作者Huey O'Brien