HTML/JS游戏选择玩家模式后点击NEXT按钮无法跳转问题排查

问题场景：开发基于HTML/JS的剪刀石头布游戏，提供1 Player和2 Player模式选择，预期选1 Player点NEXT跳转到rps_2.html，选2 Player跳转到rps2.html，但实际点击按钮后页面无响应，修改单选框name属性无效。

问题根源 #

表单内的<button>元素默认type为submit，点击时会触发表单的默认提交行为，导致页面刷新，直接中断了JS中的跳转逻辑，因此看起来没有任何跳转反应。

两种解决方案 #

方案1：修改按钮类型为button

直接给按钮添加type="button"，避免触发表单提交：

<button type="button" id="next" style="color:white">NEXT</button>

方案2：在点击事件中阻止默认行为

在按钮的点击回调函数里添加event.preventDefault()，拦截表单的默认提交动作：

nextBtn.addEventListener("click", function(event) {
    event.preventDefault(); // 阻止表单默认提交
    const selectedRadio = document.querySelector('input[name="player"]:checked');
    if (selectedRadio) {
        numOfPlayers = selectedRadio.value;
        if (numOfPlayers === "1Player") {
            window.location.href = "rps_2.html";
        } else {
            window.location.href = "rps2.html";
        }
    } else {
        console.log("Please select number of players.");
    }
});

完整修正后的代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords">
<meta name="description">
<meta charset="UTF-8">
<title>RPS Game</title>
<style>
    .header {
        background: black;
        color: white; 
        text-align: center;
        padding: 45px;
        font-size: 25px;
    }
    .body {
        font-family: Arial;
        text-align: center;
    }
    a {
        text-decoration: none;
        color: white;
    }
    button {
        font-size: 18px;
        font-family: Verdana;
        background-color: black;
        width: 250px;
        padding: 10px;
        margin: 18px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
    }
</style>
</head>
<body class="body">
<div class="header">
    <a href="rps.html">
        <h1>Diego's Rock Paper Scissors</h1>
    </a>
</div>
<br>
<div style="border: 5px solid gray; width: 280px; height: 220px; margin: 0 auto;">
    <h2>Select number of players</h2>
    <form>
        <input type="radio" id="1p" name="player" value="1Player">
        <label for="1p">1 Player</label><br>
        <input type="radio" id="2p" name="player" value="2Player">
        <label for="2p">2 Player</label><br>
        <button type="button" id="next" style="color:white">NEXT</button>
    </form>
    <br>
    <a style="color: blue;" href="https://www.w3schools.com/html/html_head.asp">HOW TO PLAY?</a>
</div>
<script>
   const nextBtn = document.querySelector("#next");
let numOfPlayers;
nextBtn.addEventListener("click", function() {
const selectedRadio = document.querySelector('input[name="player"]:checked');
if (selectedRadio) {
    numOfPlayers = selectedRadio.value;
    if (numOfPlayers === "1Player") {
        window.location.href = "rps_2.html";
    } else {
        window.location.href = "rps2.html";
    }
} else {
    console.log("Please select number of players.");
}
});
</script>
</body>
</html>

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