Chelsea-exe
Chelsea-exe

Reputation: 7

Javascript alerts not matching radio form button

I'm creating a game and I'm using the radio button form. I set up alerts using jQuery when the user chooses the correct answer and wrong answer. The alerts work when the user picks the wrong answer but when the user selected the correct answer the jQuery will run through the entire script. I thought maybe the string from the radio button wasn't matching with the Jquery so I changed it and that didn't work. I tried to add variables and having those match and that didn't work along with few other rewrites but I keep running into the same problem. I have no clue what I'm missing, thanks for the time and help.

var skit = "In Living Color";
var girlPower = "Spice Girls";
var boyBand = "AJ, Brian, Nick, Kevin & Howie";
var tvShow = "Martin";
var nba = "Chicago Bulls";
var nfl = "New Orleans, Superdome";
var film = "Titanic";

window.onload = function() {
    event.preventDefault();
    $('#Container').hide();
    $('#start-btn').on('click', function() {
        $('#Container').toggle();
        $('#Intro').hide();
        $('#Score').hide();
        console.log("Quiz has started!");
    });
    $('#submit-btn').on('click', function() {
        Validate();
    })
    function Validate () {
        var skit = $('input[name = "skit"]:checked').val();
        console.log("skit!!", skit);
        var girlPower = $('input[name = "GP"]:checked').val();
        console.log(girlPower);
        var boyBand = $('input[name = "BS"]:checked').val();
        console.log(boyBand);
        var tvShow = $('input[name = "catch"]:checked').val();
        console.log(tvShow);
        var nba = $('input[name = "NBA"]:checked').val();
        console.log(nba);
        var nfl = $('input[name = "NFL"]:checked').val();
        console.log(nfl);
        var film = $('input[name = "film"]:checked').val();
        console.log(film);
        responses = [skit, girlPower, boyBand, tvShow, nba, nfl, film];
        for(i = 0; i < responses.length; i++) {
            if (responses[i] === undefined) {
                alert("answer all questions please");
                return
            }
        }
        if (skit === "In Living Color") {
            alert("Answer #1 is correct");
        }
        else if (skit === "MADTv", skit === "The Brady Bunch", skit === "Saturday Night Live"); {
            alert("Answer #1 is wrong = In Living Color");

        }
        if (girlPower === "Spice Girls") {
            alert("Answer #2 is correct");
        }
        else if (girlPower === "TLC", girlPower === "Destiny's Child", girlPower === "Dixie Chicks"); {
            alert("Answer #2 is wrong = Spice Girls");
        }
        if (boyBand === "AJ, Brian, Nick, Kevin & Howie") {
            alert("Answer #3 is correct");
        }
        else if (boyBand === "Justin, JC, Lance, Joey & Chris", boyBand === "Nick, Jeff, Drew & Justin", 
        boyBand === "Mark, Travis & Tom"); {
            alert("Answer #3 is wrong = AJ, Brian, Nick, Kevin & Howie");
        }
        if (tvShow === "Martin") {
            alert("Answer #4 is correct");
        }
        else if (tvShow === "Moesha", tvShow === "Friends", tvShow === "Sex and The City"); {
            alert("Answer #4 is wrong = Martin");
        }
        if (nba === "Chicago Bulls") {
            alert("Answer #5 is correct");
        }
        else if (nba === "Houston Rockets", nba === "Los Angeles Lakers", nba === "San Antonio Spurs"); {
            alert("Answer #5 is wrong = Chicago Bulls");
        }
        if (nfl === "New Orleans, Superdome") {
            alert ("Answer #6 is correct");
        }
        else if (nfl === "San Diego, Qualcomm Stadium", nfl === "Miami, Joe Robbie Stadium", 
        nfl === "Pasadena, Rose Bowl"); {
            alert("Answer #6 is wrong = New Orleans, Superdome");
        }
        if (film === "The Titanic") {
            alert("Answer #7 is correct");
        }
        else if (film === "The Lion King", film === "Jurrasic Park", film === "The Color Purple"); {
            alert("Answer #7 is wrong = The Titanic");
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <script src="./assets/javascript/game4.js"></script>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/style4.css">
    <title>90's Pop Trivia</title>
    
</head>
<body>
    <div id="Intro">
        <h1 id="start">Click the start button to begin the 90's QUIZ</h1>
        <br>
        <button id="start-btn">Start game</button>
    </div>
    <div id="Container">
        <form class="quizForm" action="" onsubmit="Validate()" method="post">
            <p class="Question">What is the name of the skit show started by a famous family?</p>
                <input type="radio" name="skit" value="In Living Color"> In Living Color 
                <input type="radio" name="skit" value="The Brady Bunch"> The Brady Bunch
                <input type="radio" name="skit" value="MADTv"> MADTv
                <input type="radio" name="skit" value="SNL"> Saturday Night Live
            <p class="Question">Which of these iconic girl groups coin the phrase "Girl Power"?</p>
                <input type="radio" name="GP" value="Destiny's Child"> Destiny's Child 
                <input type="radio" name="GP" value="TLC"> TLC
                <input type="radio" name="GP" value="Spice Girls"> Spice Girls
                <input type="radio" name="GP" value="Dixie Chicks"> Dixie Chicks
            <p class="Question">What are the name of the memebers of the boy band Backstreet Boys?</p>
                <input type="radio" name="BS" value="Justin, JC, Lance, Joey, Chris"> Justin, JC, Lance, Joey & Chris 
                <input type="radio" name="BS" value="AJ, Brian, Nick, Kevin, Howie"> AJ, Brian, Nick, Kevin & Howie
                <input type="radio" name="BS" value="Nick, Jeff, Drew, Justin"> Nick, Jeff, Drew & Justin
                <input type="radio" name="BS" value="Mark, Travis, Tom"> Mark, Travis & Tom
            <p class="Question">What tv show had this recongized catach-phrase "GET TO STEPPIN"?</p>
                <input type="radio" name="catch" value="Moesha"> Moesha
                <input type="radio" name="catch" value="Martin"> Martin
                <input type="radio" name="catch" value="Friends"> Friends
                <input type="radio" name="catch" value="Sex and The City"> Sex and The City
            <p class="Question">Which NBA franchise won the NBA Finals the most from 1990-1999?</p>
                <input type="radio" name="NBA" value="Houston Rockets"> Houston Rockets 
                <input type="radio" name="NBA" value="Los Angeles Lakers"> Los Angeles Lakers
                <input type="radio" name="NBA" value="San Antonio Spurs"> San Antonio Spurs
                <input type="radio" name="NBA" value="Chicago Bulls"> Chicago Bulls
            <p class="Question">The NFL host a championship game called the "Superbowl", Superbowl XXIV was located in what city and stadium in 1990?</p>
                <input type="radio" name="NFL" value="New Orleans, Superdome"> New Orleans, Superdome 
                <input type="radio" name="NFL" value="San Diego, Qualcomm Stadium"> San Diego, Qualcomm Stadium 
                <input type="radio" name="NFL" value="Miami, Joe Robbie Stadium"> Miami, Joe Robbie Stadium
                <input type="radio" name="NFL" value="Pasadena, Rose Bowl"> Pasadena, Rose Bowl
            <p class="Question">Which film in the 90's was the highest grossing film of decade?</p>
                <input type="radio" name="film" value="The Lion King"> The Lion King 
                <input type="radio" name="film" value="Jurrasic Park"> Jurrasic Park
                <input type="radio" name="film" value="The Color Purple"> The Color Purple
                <input type="radio" name="film" value="The Titanic"> The Titanic
        </form>
        <button id="submit-btn">Submit</button>
        <div id="Clock">00:00</div>
        <div id="Score">
            <p class="Finish">Congrarts! You have finished the 90's Pop Quiz!</p>
            <p class="Finish"></p>
        </div>
    </div>

    
</body>
</html>

Upvotes: 0

Views: 35

Answers (1)

Barmar
Barmar

Reputation: 781255

You have two problems in code like this:

else if (skit === "MADTv", skit === "The Brady Bunch", skit === "Saturday Night Live"); {
    alert("Answer #1 is wrong = In Living Color");
}
  1. To test multiple conditions, you should separate them with ||, not ,.

  2. You have ; immediately after the if(condition) part. This means that the block after it is not part of the if statement, it's a separate block that runs unconditionally.

The code should be:

else if (skit === "MADTv" || skit === "The Brady Bunch" || skit === "Saturday Night Live") {
    alert("Answer #1 is wrong = In Living Color");
}

But there isn't really any need for the else if condition. Just use else, since you're matching all the other possibilities.

else {
    alert("Answer #1 is wrong = In Living Color");
}

Upvotes: 1

Related Questions