HTML JavaScript 测验答案

【问题标题】：HTML JavaScript QuizHTML JavaScript 测验
【发布时间】：2014-11-27 00:50:59
【问题描述】：

我决定采用另一种方式，因为这是计算机科学 101 课程的作业，我需要使用 java 脚本使用简单的 html 代码。无论如何，我有另一个代码。这段代码的问题是当一个人在第二个问题中选择 A 时，我希望代码检查一个人在第一个问题中是选择 A 还是 B。看一下代码：

<html>
<head>
    <title>Quiz</title>
</head>

<body bgcolor="#FFFFFF">
    <h1>Quiz</h1><br>
    <hr>

    <form>
        <ol>
            <li>Do you know when is Canada Day?

                <p><input onclick="myFunction2()" type=
                'button' value='A'> Yes</p>

                <p><input type=
                'button' value='B'> No</p>

                <p></p>
                <hr>

                <p></p>
            </li>

            <li>Do you celebrate Canada Day?

                <p><input onclick="myFunction3()" type=
                'button' value='A'> Yes</p>

                <p><input onclick="myFunction1()" type=
                'button' value='B'> No</p>

                <p></p>
                <hr>

                <p></p>
            </li>
        </ol>
    </form>
    <script>
    var x;
    function myFunction1()
    {
        alert('You have to learn more about Canada Day!')
    }

    function myFunction2()
    {
        x=1;
    }

    function myFunction3()
    {
    if (x=1)
    {
        alert('You are a true Canadian')
    }
    else
    {
        alert('You have to learn more')
    }
    }

    </script>
</body>
</html>

【问题讨论】：

标签： javascript html if-statement

【解决方案1】：

我建议首先不要编写内联 Javascript。

您想为您的按钮设置事件处理程序，这需要您为它们分配一个类名，以便设置我们的事件侦听器。为了简单起见，我将使用 jQuery 来执行此操作。

这是我为你创建的JsFiddle。

HTML

<html>
    <head>
        <title>Quiz</title>
    </head>
    <body bgcolor=#ffffff>
        <center><h1>Quiz</h1></center><hr>
        <p>Do you know when is Canada Day?<p>
        <button class="canadaButtonYes">Yes<p>
        <button class="canadaButtonNo">No<p>
    </body>
</html>

Javascript / jQuery

$(document).ready( function() {
    $('.canadaButtonYes').on('click', function() {
        answer = confirm('Do you celebrate Canada day?');
        if (answer === true)
            alert('You are a true canadian!');
        else 
            alert('You should learn more!');
    });

    $('.canadaButtonNo').on('click', function() {
        alert("You should learn more!");
    });

});

祝你好运。

【讨论】：