时间戳

首页 > 解决方案 > Javascript 警报与单选表单按钮不匹配

javascript - Javascript 警报与单选表单按钮不匹配

问题描述

我正在创建一个游戏，我正在使用单选按钮表单。当用户选择正确答案和错误答案时，我使用 jQuery 设置警报。当用户选择错误答案时，警报会起作用，但当用户选择正确答案时，jQuery 将运行整个脚本。我想也许单选按钮中的字符串与 Jquery 不匹配，所以我更改了它，但没有奏效。我尝试添加变量并使其匹配，但这与其他一些重写都不起作用，但我一直遇到同样的问题。我不知道我错过了什么，感谢您的时间和帮助。

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>

标签： javascriptjqueryhtmlvalidationradio-button

解决方案

您在这样的代码中有两个问题：

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

  1. 要测试多个条件，您应该用||，而不是将它们分开,。

  2. 你有;紧随其后的if(condition)部分。这意味着它后面的块不是if语句的一部分，它是一个无条件运行的单独块。

代码应该是：

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

但实际上没有任何必要else if条件。只需使用else, 因为您正在匹配所有其他可能性。

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

推荐阅读