Radio button redirect page

Question

I'm trying to make a menu for a Memory Game type game. I created the html page that contains a form consisting of 2 radio buttons with different values. On the submit input I called my function from the javascript file. And in the js file I created an if else function to redirect me, but it doesn't work. Code: `

let button = document.getElementById("button");
let solo = document.getElementById("solo");
let multiplayer = document.getElementById("multiplayer");
let level1 = document.getElementById("3x4");
let level2 = document.getElementById("4x4");

let radio1 = document.getElementsByName("radio1");
let radio2 = document.getElementsByName("radio2");

// button.addEventListener("click", gameMenu);

function gameMenu() {
    if ((radio1.value = "solo") && (radio2.value = "3x4")) {
        // location.href = "sg_34.html";
        console.log("solo/3x4");
    }
    else if ((radio1.value = "solo") && (radio2.value = "4x4")) {
        // location.href = 'sg-44.html';
        console.log("solo/4x4");

    }
    else if ((radio1.value = "multiplayer") && (radio2.value = "3x4")) {
        // location.href = 'mp-34.html';
        console.log("mp/3x4");
    }
    else if ((radio1.value = "multiplayer") && (radio2.value = "4x4")) {
        // location.href = "mp-44.html";
        console.log("mp/4x4");
    }
}

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="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>
            <input class="submit" id="button" type="submit" value="Play" onclick="gameMenu()">
        </form>
    </div>
    <script src="./scripts/index.js"></script>
</body>

</html>

`

Code pen: https://codepen.io/sebastian-mihai-ciuc/pen/BaVagNM

I created the conditions in an if else structure to check the values in the radio buttons. I expected it to redirect me to other pages or at least display the cases in the console.log.

Please see [What is the difference between the = and == operators, and what is ===?](/q/11871616/4642212), [What do querySelectorAll and getElementsBy\* methods return?](/q/10693845/4642212), and [How to prevent form from being submitted?](/q/3350247/4642212). — Sebastian Simon, Oct 26 '22 at 07:15
Use `class` or `id` in place of `name` and if required you can use `preventDefault()` to check/ — Ankit, Oct 26 '22 at 07:31
@Ankit _“Use `class` or `id` in place of `name`”_ — Why? — Sebastian Simon, Oct 26 '22 at 07:37

score -2 · Answer 1 · answered Oct 26 '22 at 07:22

-2

You should remove form tags for not reloading the window

answered Oct 26 '22 at 07:22

Muammer Top

42
5

1

No, having the `
` tags there is semantically nice. In order to avoid submitting the form, proper event handling should be used, e.g. using [`preventDefault`](//developer.mozilla.org/en/docs/Web/API/Event/preventDefault).
– Sebastian Simon Oct 26 '22 at 07:26
that's correct too. – Muammer Top Oct 26 '22 at 07:31

Radio button redirect page

1 Answers1