javascript - JS 更改为 HTML 闪烁消失

我一直在尝试用 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>

最佳答案

您只看到一闪文字的原因是因为正在显示文本，然后页面立即刷新。这是因为您的复选按钮位于形式。由于表单没有设置 action 或 method，因此它默认通过 GET 提交到当前页面，这与刷新页面基本相同。

查看您的代码，您有很多可能不需要的表单。您不会将数据发送到任何地方，您只是在 JavaScript 中本地检查它。但是，要删除所有这些，您的 JavaScript 代码将需要进行重大修改，因此为了避免这种情况，您可以通过以下两种方式之一解决此问题:

从按钮中删除表单

现在它根本没有做任何事情。只要摆脱它，你就不会有问题了。替换

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

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

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

您的样式应位于head中。
您的链接(返回首页和突出显示事实)不应位于head 中，而应位于body 中。内容永远不会出现在head中。
您的脚本不能只是在一个偏僻的地方。它必须位于 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";

关于javascript - JS 更改为 HTML 闪烁消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27974761/

javascript - JS 更改为 HTML 闪烁消失

上一篇：javascript - 如何通过ajax加载JS文件？

下一篇：javascript - d3 堆积条形图 - 从 y0 开始，而不是 yMax