Question 44363 in Html Question posted in
Some basic documentation can be found here.

Why this code doesn't redirect to the correct links? – Html

I’m creating a simple game based in HTML and JS. The game asks you how many players are going to play, and the options are 1 player and 2 players. When click on "1 player" and then in the NEXT button, the game should redirect to the rps_2.html page, and when click on "2 player", it should redirect to the rps2.html page.

Th`e problem is that when I click on any of the 2 options and click on the NEXT button, the page doesn’t redirect to any link, it stay there with no response.

I’m going to share the full code, so you can check it and tell me if there are any problem with it. Here is my code:

`<!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 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>`

Thank you for your help!

I’ve changed the ‘name’ of the radio inputs (I put the 2 outputs with the same and different names and the error still there)

Tags:

2

Answers


  1. 0

    Nothing is happening because it is trying to submit a form when you click next. Add the following to your form:

    <form onsubmit="return false">

    Or remove the form tags.

    Login or Signup to reply.
  2. 0

    Because when you click the button the form is getting submitted. So the page refreshes instead of executing the rest of the script.

    Solutions

    Remove <form></form> if you don’t actually need it.

    OR

    Stop <form> from submission.

    <form onSubmit="return false">

    OR

    Define the button type as button (Otherwise, the form will think it’s a type='submit'. But anyway hitting enter will submit the form).

    <button id="next" type="button" style="color:white">NEXT</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search