Я не могу получить переключатели, чтобы дать мне предупреждение в операторе if, чтобы соединиться с моим счетом - PullRequest
Новая
       32

Я не могу получить переключатели, чтобы дать мне предупреждение в операторе if, чтобы соединиться с моим счетом

0 голосов
/ 15 декабря 2018

Я пытаюсь сделать так, чтобы, когда пользователь нажимал «да», игра отслеживала совпадения и ходы пользователей.если пользователь нажимает нет, то не будет.но я даже не могу получить предупреждение, когда пользователь нажимает радиокнопку «да», и я не знаю почему.Я искал ответы повсюду, но ничего, что я сделал, похоже, не работает.Мне нужно, чтобы это был весь 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>

Ответы [ 3 ]

0 голосов
/ 16 декабря 2018

Радиокнопки сгруппированы по их атрибуту имени, и при выборе любой из них происходит событие 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">
0 голосов
/ 16 декабря 2018

Я не думаю, что вы можете выбрать переключатель с помощью getElementsByClassName здесь.см. этот вопрос переполнения стека, чтобы выбрать переключатели -> Проверьте переключатель с помощью javascript .Кроме того, вы включаете событие onCLick, находящееся внутри другого события выпадающего меню.Поместите радио на корень, не помещая его в другую функцию.Вы должны правильно выбрать и получить значение переключателя.

0 голосов
/ 16 декабря 2018

Здесь происходит несколько вещей.Во-первых, getElementsByClassName() ищет атрибут class, а не name.Вы должны изменить свой элемент ввода на: 

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

Во-вторых, когда вы добавляете прослушиватель щелчков, вы определяете функцию scoreBoard, которая никогда не выполняется.Если вы удалите функцию и переместите код в предложение, в котором она была определена, вы получите желаемое поведение.Как это: 

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

}
...