I can not get the radio buttons to give me an alert in an if statement to connect with my score box

Question

I am trying to make it so when a user clicks yes then the game will track the users matches and moves. if the user clicks no then it won't. but I cant even get an alert to appear when the user clicks the yes radio button and I don't know why. I have been looking all over for answers but nothing I have done seems to work. I need this to be all javascript and no jQuery.... also no vanilla or anything else like that. if anyone needs any more details let me know.

window.onload = function () {

    'use strict'

    let gameChoice = [];

gameChoice[0] = {
    cardNumbers: "1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8",
    cardLetters: "a,a,b,b,c,c,d,d,e,e,f,f,g,g,h,h"
};

let gameSelect = document.getElementById("input");

gameSelect.addEventListener("click", function () {
    let options = gameSelect.querySelectorAll("option");



});

gameSelect.addEventListener("change", function () {
    if (gameSelect.value == "nothing") {
        return "";
    } else if (gameSelect.value == "numbers") {
        return `${this.cardNumbers}`;
    } else if (gameSelect.value == "letters") {
        return `${this.cardLetters}`;
    } else if (gameSelect.value == "colors") {
        alert("hi")
    };


    let matches = 0;
    let moves = 0;



    let radios = document.getElementsByClassName('counted');
    for (let i = 0; i < radios.length; i++) {

        radios[i].addEventListener('click', function () {
            if (radios[i].checked) {
                // set up matches and move score
                function scoreBoard() {
                    document.getElementById('move').value = moves;
                    document.getElementById(matchNum).value = matches;
                    alert("yes");

                }
            } else if (radios[i].checked) {
                return "";

            }
        });
    }


    let startOver = document.getElementById('startOver');

    startOver.addEventListener("click", function () {
        function shuffle(gameChoice) {
            let j, x, i;
            for (i = gameChoice.length - 1; i > 0; i--) {
                j = Math.floor(Math.random() * (i + 1));
                x = gameChoice[i];
                gameChoice[i] = gameChoice[j];
                gameChoice[j] = x;
            }
            return gameChoice;


        }

    });
});

};

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

<head>

    <title>card game</title>
    <meta charset="utf-8" />


     <meta name="author" content="">
        <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>
<div class="cardHolder">
    <div id="holder">

        <table class="tg">
            <tr>
                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack" class="cardBack" alt="cardBack" value="a 1"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack1" class="cardBack" alt="cardBack" value="a 1"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack2" class="cardBack" alt="cardBack" value="b 2"></td>

                <td class="tg-0pky"><img src="img/cardBack.svg" id="cardBack3" class="cardBack" alt="cardBack" value="b 2"></td>

            </tr>
            <tr>
                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack4" class="cardBack" alt="cardBack" value="c 3"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack5" class="cardBack" alt="cardBack" value="c 3"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack6" class="cardBack" alt="cardBack" value="d 4"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack7" class="cardBack" alt="cardBack" value="d 4"></td>

            </tr>
            <tr>
                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack8" class="cardBack" alt="cardBack" value="e 5"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack9" class="cardBack" alt="cardBack" value="e 5"></td>
                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack10" class="cardBack" alt="cardBack" value="f 6"></td>
                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack11" class="cardBack" alt="cardBack" value="f 6"></td>

            </tr>
            <tr>
                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack12" class="cardBack" alt="cardBack" value="g 7"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack13" class="cardBack" alt="cardBack" value="g 7"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack14" class="cardBack" alt="cardBack" value="h 8"></td>

                <td class="cardSlot"><img src="img/cardBack.svg" id="cardBack15" class="cardBack" alt="cardBack" value="h 8"></td>

            </tr>
        </table>
    </div>
</div>



<div class="about">
    <div id="border">
        <h2 id="assignmentTitle">CWD3200 - ASSIGNMENT 4 - SCRIPTING THE DOM</h2>

        <div class="gC">
            <h2 id="gameControls">Game Controls</h2>
            <h3 class="match">Matching Pairs:</h3>
            <select id="input">
                     <option id="nothing" value="nothing">NOTHING</option>
                    <option id="numbers" value="numbers">NUMBERS</option>
                    <option id="letters" value="letters">LETTERS</option>
                    <option id="colors" value="colors">COLORS</option>

                </select>
            <h3 class="match">Show Counts:</h3>
            <h5 id="no">No:</h5><input type="radio" id="counts" name="counted">
            <h5 id="yes">Yes:</h5><input type="radio" id="counts1" name="counted">
            <button id="startOver">START OVER</button>
        </div>


        <div class="scoreBox">
            <h2 class="scores">Game Counts</h2>
            <h3 id="moves">Moves:</h3>
            <input type="text" id="move">
            <h3 id="Matches">Matches:</h3>
            <input type="text" id="matchNum">


        </div>


        <div id="ruleBox">
            <h2 id="title">Rules</h2>

            <h3 class="rules">
                Rule #1:
            </h3>
            <p id="class"> blah balh</p>
            <h3 id="rules">
                Rule #2:
            </h3>
            <p class="text"> blah balh</p>
            <h3 class="rules">
                Rule #3:
            </h3>
            <p class="text"> blah balh</p>
            <h3 class="rules">
                Rule #4:
            </h3>
            <p class="text"> blah balh</p>
        </div>


    </div>
</div>

<div id="messageBox">
    <div id="messageBorder">
        <p id="message"></p>
    </div>
</div>









<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</body>
</html>

score 0 · Answer 1 · answered Dec 15 '18 at 21:43

There are a couple of things going on here. First off, getElementsByClassName() looks for the attribute class rather than name. You have to change your input element to:

<input type="radio" id="counts1" class="counted">

Secondly, when you add the click listener, you define a function scoreBoard which is never executed. If you remove the function and move the code to the clause where it was defined, you'll get the behaviour that you want. Like this:

if (radios[i].checked) {
    // set up matches and move score
    document.getElementById('move').value = moves;
    document.getElementById(matchNum).value = matches;
    alert("yes");
} else if (radios[i].checked) {
    return "";

}

score 0 · Answer 2 · answered Dec 15 '18 at 21:54

Radio buttons are grouped together using their name attribute and when any of them are selected the change event is fired. You can then access the new value inside the event listener using this.value. Note that returning a value from an event handler doesn't necessarily make sense because nothing is expecting that value. If you need to do something with that value, you should do it inside the event handler function, or pass it in to another function.

// select the radio elements
var radios = document.getElementsByTagName('input');

// loop over the radios 
for( var i = 0; i < radios.length; i++ ){
 // add an event listener
  radios[i].addEventListener('change', function(){
   // when this input is changed, log the new value
    console.log( this.value);
  });
}

<label for="test_yes">Yes</label>
<input id="test_yes" type="radio" name="test" value="Yes">

<label for="test_no">No</label>
<input id="test_no" type="radio" name="test" value="No">

score 0 · Answer 3 · answered Dec 15 '18 at 22:05

I don't think you can select the radio button using getElementsByClassName in here. refer this stack overflow question to select the radio buttons -> Check a radio button with javascript. Also you radio button onCLick event is inside the on another drop down event change. Put the radio onlick to the root without putting it inside another function. You should be looking to select and get the radio button value in the correct way.

I can not get the radio buttons to give me an alert in an if statement to connect with my score box

3 Answers3