Question

我一直在尝试使用HTML和java脚本进行单选按钮检查。当我单击“检查”按钮时，它会将内部html更改为段落。由于某种原因，文本只显示大约半秒然后消失。我似乎无法弄清楚这个问题。

JS档案：

function runQuestionCheck() {
    var question_one_answer = 1;
    var question_two_answer = 1;
    var question_three_answer = 1;

    var question_one_explanation = "Text explaining why that's stupid!";
    var question_two_explanation = " ";
    var question_three_explanation = " ";

    var question_one = document.getElementById("question_1").childNodes;
    if (question_one[question_one_answer].isChecked) {
        document.getElementById("q1_response").class = "correct";
        document.getElementById("q1_response").innerHTML = "Correct!";
    }
    else
    {
        document.getElementById("q1_response").innerHTML = ("Sorry, that's incorrect." +     question_one_explanation);
    }
}

HTML：

<!DOCTYPE html>
<html>
    <!-- Init CSS -->
    <style>
        html {
            background-image: url("../Pictures/bg_france.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        .center {
            margin-left: auto;
            margin-right: auto;
            width: 20%;
        }

        .right {
            position: absolute;
            right: 1cm;
        }

        .left {
            position: absolute;
            left: 1cm;
        }

        .button_left {
            position: absolute;
            left: 1cm;
            color: blue;
        }

        .button_right {
            position: absolute;
            right: 1cm;
            color: blue;
        }

        .correct {
            color: green;
        }

        .incorrect {
            color: red;
        }
    </style>

    <!-- Init head -->
    <head>
        <a href="home.html">
            <div class="button_left">
                Back to Home
            </div>
        </a>
        <a href="sub_france.html">
            <div class="button_right">
                Highlight facts
            </div>
        </a>
        <title>
            France
        </title>
        <link rel="icon" type="image/png" href="../Pictures/beck_icon.png">
    </head>

    <!-- Init question script -->
    <script type="text/javascript" src="../JavaScripts/questions_spain.js"></script>

    <!-- Init body -->
    <body>
        <br>
        <FONT FACE="arial">
        <!-- Title -->
            <h1>
                America and France
            </h1>
        <!-- Body/Info -->
            <p>
                This is where the info would go.
            </p>
            <br>
        <!-- Questions -->
            <hr>
            <h1>Comprehension Questions</h1>
            <form id="question_1">
                This is the first question!
                <br>
                <input type="radio" name="color" value="q1_one">Answer one<br>
                <input type="radio" name="color" id="q1_two" value="green">Answer two<br>
                <input type="radio" name="color" id="q1_three" value="blue">Answer three<br>
            </form>
            <p id="q1_response"></p>
            <br>
            <form id="question_2">
                This is the second question!
                <br>
                <input type="radio" name="color" value="q2_one">Answer one<br>
                <input type="radio" name="color" id="q2_two" value="green">Answer two<br>
                <input type="radio" name="color" id="q2_three" value="blue">Answer three<br>
            </form>
            <p id="q2_response"></p>
            <br>
            <form id="question_3">
                This is the third question!
                <br>
                <input type="radio" name="color" value="q3_one">Answer one<br>
                <input type="radio" name="color" id="q3_two" value="green">Answer two<br>
                <input type="radio" name="color" id="q3_three" value="blue">Answer three<br>
            </form>
            <br>
            <form>
                <button onclick="runQuestionCheck()">Check answers!</button>
            </form>
            <p id="q3_response"></p>
            <br>
        </FONT>
    </body>
</html>

Answer 1

您只看到文本闪烁的原因是因为正在显示文本，然后页面立即被刷新。这是由于您的检查按钮位于形成。由于表单没有action或method集，因此默认通过GET提交到当前页面，这与刷新页面基本相同。

查看代码，您可能需要很多表单。您不是在任何地方发送数据，而只是在JavaScript中本地检查它。但是，要删除所有这些代码，您的JavaScript代码需要进行大幅修改，以避免您可以通过以下两种方式解决此问题：

从按钮中移除form

现在它根本没有做任何事情。摆脱它，你就不会有问题。取代

<form>
    <button onclick="runQuestionCheck()">Check answers!</button>
</form>

使用

<button onclick="runQuestionCheck()">Check answers!</button>

或者，在按钮中添加type属性

该按钮默认为提交按钮，该按钮将提交单击时提供的任何形式。这就是我们想要避免的，所以您可以将其设置为普通按钮，如下所示：

<form>
    <button onclick="runQuestionCheck()" type="button">Check answers!</button>
</form>

如果您想保留表单，那么这是您的最佳选择。

您的代码也存在其他一些问题。

您的style应该放入head。
您的链接（返回主页和突出显示事实）不应位于head，它们应位于body。内容永远不会出现在head。
你的script不能只是在不知名的地方。它必须包含head或body。现在通常建议将它放在body。
您不应该使用FONT标记来设置文本样式，您应该使用CSS。要将所有内容放入Arial中，您可以将其放在style标记中：
```
body {
    font-family: arial;
}
```
您的JavaScript会遇到错误。在JavaScript中更改元素类的正确方法是className。替换这个：
```
document.getElementById("q1_response").class = "correct";
```
有了这个：
```
document.getElementById("q1_response").className = "correct";
```

JS更改为HTML闪烁

1 个答案: