samedi 15 décembre 2018

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

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.

html

<title>card game</title>
<meta charset="utf-8" />
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="css/main.css">

<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>
<script src="js/main.js"></script>

js 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;


        }

    });
});

};

Aucun commentaire:

Enregistrer un commentaire