单选按钮跳转页面失效求助：记忆游戏菜单功能异常

问题根源 #

你的代码存在三个核心问题导致功能失效：

• 表单默认提交行为：提交按钮为type="submit"，点击后会触发表单默认提交，页面刷新，JavaScript逻辑无法完整执行。
• 单选按钮取值错误：document.getElementsByName()返回的是NodeList（元素集合），不能直接通过.value获取选中项的值。
• 条件判断错误：使用了赋值运算符=而非比较运算符===，导致逻辑判断完全失效。

修复方案 #

1. 阻止表单默认提交：将提交按钮类型改为button，避免触发表单默认提交行为。
2. 正确获取选中单选按钮的值：使用querySelector直接定位选中的单选按钮，获取其值。
3. 修正条件判断运算符：将所有=替换为===进行严格相等判断。

修复后的完整代码 #

HTML 修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/styleIndex.css">
    <title>Memorizer JS</title>
</head>

<body>
    <div class="container">
        <h1>Memorizer JS</h1>
        <form class="form menu">
            <section class="game cf">
                <h2>Choose game mode:</h2>
                <input type="radio" name="radio1" id="solo" value="solo">
                <label class="solo-label four col" for="solo">Solo</label>
                <input type="radio" name="radio1" id="multiplayer" value="multiplayer">
                <label class="multiplayer-label four col" for="multiplayer">With a friend</label>
            </section>
            <section class="level cf">
                <h2>Level:</h2>
                <input type="radio" name="radio2" id="3x4" value="3x4">
                <label class="3x4-label four col" for="3x4">3x4</label>
                <input type="radio" name="radio2" id="4x4" value="4x4">
                <label class="4x4-label four col" for="4x4">4x4</label>
            </section>
            <!-- 改为button类型，避免默认提交 -->
            <input class="submit" id="button" type="button" value="Play" onclick="gameMenu()">
        </form>
    </div>
    <script src="./scripts/index.js"></script>
</body>

</html>

JavaScript 修改

function gameMenu() {
    // 获取选中的游戏模式和难度，可选链避免未选中时报错
    const selectedMode = document.querySelector('input[name="radio1"]:checked')?.value;
    const selectedLevel = document.querySelector('input[name="radio2"]:checked')?.value;

    // 校验是否完成选择
    if (!selectedMode || !selectedLevel) {
        console.log("请选择游戏模式和难度");
        return;
    }

    // 修正条件判断逻辑
    if (selectedMode === "solo" && selectedLevel === "3x4") {
        // location.href = "sg_34.html";
        console.log("solo/3x4");
    } else if (selectedMode === "solo" && selectedLevel === "4x4") {
        // location.href = 'sg-44.html';
        console.log("solo/4x4");
    } else if (selectedMode === "multiplayer" && selectedLevel === "3x4") {
        // location.href = 'mp-34.html';
        console.log("mp/3x4");
    } else if (selectedMode === "multiplayer" && selectedLevel === "4x4") {
        // location.href = "mp-44.html";
        console.log("mp/4x4");
    }
}

额外优化建议 #

• 移除代码中未使用的变量（如button、solo等），精简代码结构。
• 推荐使用addEventListener绑定点击事件替代onclick属性，更利于代码维护：

  document.getElementById("button").addEventListener("click", gameMenu);
  

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