时间戳

首页 > 解决方案 > 我无法让单选按钮在 if 语句中向我发出警报以连接我的分数框

javascript - 我无法让单选按钮在 if 语句中向我发出警报以连接我的分数框

问题描述

我正在努力做到这一点，因此当用户单击“是”时，游戏将跟踪用户的匹配和移动。如果用户单击否，则不会。但是当用户单击是单选按钮时，我什至无法收到警报，我不知道为什么。我一直在寻找答案，但我所做的一切似乎都不起作用。我需要这全部是 javascript 而不是 jQuery.... 也没有香草或其他类似的东西。如果有人需要更多详细信息，请告诉我。

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>

标签： javascriptfunctionif-statementbuttonradio

解决方案

单选按钮使用它们的名称属性组合在一起，当其中任何一个被选中时，change都会触发事件。然后，您可以使用 访问事件侦听器中的新值this.value。请注意，从事件处理程序返回值不一定有意义，因为没有任何东西期望该值。如果你需要用那个值做一些事情，你应该在事件处理函数中做，或者将它传递给另一个函数。

// 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">

推荐阅读