Question

我只是编写一个小测验来教朋友html和javascript基础知识。我得到了html和javascript所有w / o语法错误或其他东西。 javascript是可解析的，我所有的调试工具都没有找到错误。问题是德语，但这是无关紧要的这是代码：
HTML
每个问题都在h1标签中查找问题，div有一个带有问题编号的id，所有答案都在标签中，并且其编号也是id。

<div id="questionOne" style="display:none;">
    <h1>
        Von wo aus kann man nur nach S&uuml;den gehen?
    </h1>
    <br>
    <br>
    <a id="questionOneAnswerOne">Norpol</a> <br> <!--Richtig-->
    <a id="questionOneAnswerTwo">S&uuml;dpol</a> <br>
    <a id="questionOneAnswerThree">&Auml;quator</a> <br>

我实现了像这样的javascipt：

<head>
<script type="text/javascript" src="javascript.js"></script>
</head>

脚本如下：首先，我为每个答案定义一个这样的变量

var questionOneAnswerOne = document.getElementById("questionOneAnswerOne");

比正确的答案得到像这样的代码

questionOneAnswerOne.onclick = function() {
    console.log("Right!");
    document.getElementById("questionOne").style.display="none";
    document.getElementById("questionTwo").style.display="block";
};

刚刚隐藏刚刚完成并显示下一个问题

之后，所有错误的答案都会得到像这样的代码

questionOneAnswerTwo.onclick = function() {
    console.log("Wrong!");
    location.reload();
};

迫使整个方重新加载，而不是你回到开始

此代码的旧版本运行良好，我不知道发生了什么。

这是整个代码
的javascript：

    //Go!
document.getElementById("go").onclick=function(){
    console.log("Let the games begin!");
};
//One
var questionOneAnswerOne = document.getElementById("questionOneAnswerOne");
var questionOneAnswerTwo = document.getElementById("questionOneAnswerTwo");
var questionOneAnswerThree = document.getElementById("questionOneAnswerThree");
var questionOneAnswerFour = document.getElementById("questionOneAnswerFour")
//Two
var questionTwoAnswerOne = document.getElementById("questionTwoAnswerOne");
var questionTwoAnswerTwo = document.getElementById("questionTwoAnswerTwo");
var questionTwoAnswerThree = document.getElementById("questionTwoAnswerThree");
var questionTwoAnswerFour = document.getElementById("questionTwoAnswerFour")
//Three
var questionThreeAnswerOne = document.getElementById("questionThreeAnswerOne");
var questionThreeAnswerTwo = document.getElementById("questionThreeAnswerTwo");
var questionThreeAnswerThree = document.getElementById("questionThreeAnswerThree");
var questionThreeAnswerFour = document.getElementById("questionThreeAnswerFour")
//Four
var questionFourAnswerOne = document.getElementById("questionFourAnswerOne");
var questionFourAnswerTwo = document.getElementById("questionFourAnswerTwo");
var questionFourAnswerThree = document.getElementById("questionFourAnswerThree");
var questionFourAnswerFour = document.getElementById("questionFourAnswerFour")


//richtige Antwort (german for right answer)
questionOneAnswerOne.onclick = function() {
    console.log("Right!");
    document.getElementById("questionOne").style.display="none";
    document.getElementById("questionTwo").style.display="block";
};

questionTwoAnswerFour.onclick = function() {
    console.log("Right!");
    document.getElementById("questionTwo").style.display="none";
    document.getElementById("questionThree").style.display="inline";
};

questionThreeAnswerTwo.onclick = function() {
    console.log("Right!");
    document.getElementById("questionThree").style.display="none";
    document.getElementById("questionFour").style.display="inline";
};

questionFourAnswerThree.onclick = function() {
    console.log("Right!");
    document.getElementById("questionFour").style.display="none";
    document.getElementById("questionFive").style.display="inline";
};



//falsche Antwort (german for wrong answer)
//One
questionOneAnswerTwo.onclick = function() {
    console.log("Wrong!");
    location.reload();
};

questionOneAnswerThree.onclick = function() {
    console.log("Wrong!");
    location.reload();
};

questionOneAnswerFour.onclick = function() {
    console.log("Wrong!");
    location.reload();
};
//Two
questionTwoAnswerOne.onclick = function() {
    console.log("Wrong!");
    doculocation.reload();
};

questionTwoAnswerTwo.onclick = function() {
    console.log("Wrong!");
    location.reload();
};

questionTwoAnswerThree.onclick = function() {
    console.log("Wrong!");
    location.reload();
};
//Three
questionThreeAnswerOne.onclick = function() {
    console.log("Wrong!");
    doculocation.reload();
};

questionThreeAnswerThree.onclick = function() {
    console.log("Wrong!");
    location.reload();
};

questionThreeAnswerFour.onclick = function() {
    console.log("Wrong!");
    location.reload();
}
//Four
questionFourAnswerOne.onclick = function() {
    console.log("Wrong!");
    doculocation.reload();
};

questionFourAnswerTwo.onclick = function() {
    console.log("Wrong!");
    location.reload();
};

questionFourAnswerFour.onclick = function() {
    console.log("Wrong!");
    location.reload();
}

//Start
//go.onclick = function() {
//  console.log("Let the games begin!")
//  document.getElementById("startScreen").style.display="none";
//  document.getElementById("questionOne").style.display="inline";
//};

这是html（它包含一些新问题的emty div）：

    <!DOCTYPE html>
<head>
    <script type="text/javascript" src="javascript.js"></script>
</head>
<body>
    <div id="startScreen">
        <h1>
            WELCOME TO THE 100 QUESTION GAME!
        </h1>

        <h2 id="go" style="color:pink">
            Lets GO!
        </h2>
        <p>
            by strawberry studios
        </p>

    </div>

    <div id="questionOne" style="display:none;">
        <h1>
            Von wo aus kann man nur nach S&uuml;den gehen?
        </h1>
        <br>
        <br>
        <a id="questionOneAnswerOne">Norpol</a> <br> <!--Richtig-->
        <a id="questionOneAnswerTwo">S&uuml;dpol</a> <br>
        <a id="questionOneAnswerThree">&Auml;quator</a> <br>
        <a id="questionOneAnswerFour">Bayern</a> <br>
    </div>

    <div id="questionTwo" style="display:none;">
        <h1>
            Was ist am teuersten?
        </h1>
        <br>
        <br>
        <a id="questionTwoAnswerOne">Diamant</a> <br>
        <a id="quoestionTwonswerTwo">Platin</a> <br>
        <a id="questionTwoAnswerThree">Gold</a> <br>
        <a id="questionTwoAnswerFour">Osmium<a/> <br> <!--Richtig-->
    </div>

    <div id="questionThree" style="display:none;">
        <h1>
            Wof&uulm;r steht HTML?
        </h1>
        <br>
        <br>
        <a id="questionThreeAnswerOne">Hyper Text Multiple Language</a> <br>
        <a id="questionThreenswerTwo">Hyper Text Markup Language</a> <br> <!--Richtig-->
        <a id="questionThreeAnswerThree">Hydrotecinmultiliquid</a> <br>
        <a id="questionThreeAnswerFour">Hype The Mother (a)lLong<a/> <br>
    </div>

    <div id="questionFour" style="display:none;">
        <h1>
            Welche Farbe h&auml;tte Cola ohne Farbstoffe?
        </h1>
        <br>
        <br>
        <a id="questionFourAnswerOne">Gelb</a> <br>
        <a id="questionFouranswerTwo">Erdbraun</a> <br>
        <a id="questionFourAnswerThree">Grün</a> <br> <!--Richtig-->
        <a id="questionFourAnswerFour">Türkis<a/> <br>
    </div>

    <div id="questionFive" style="display:none;">

    </div>

    <div id="questionSix" style="display:none;">

    </div>

    <div id="questionSeven" style="display:none;">

    </div>

    <div id="questionEight" style="display:none;">

    </div>

    <div id="questionNine" style="display:none;">

    </div>

    <div id="questionTen" style="display:none;">

    </div>

</body>

Answer 1

如果我正确理解您的问题并且在按下go按钮后没有出现问题，那么您似乎错过了事件中的一些代码：

//Go!
document.getElementById("go").onclick=function(){
    console.log("Let the games begin!");
};

应该是：

//Go!
document.getElementById("go").onclick=function(){
    console.log("Let the games begin!");
    document.getElementById("go").style.display="none";
    document.getElementById("questionOne").style.display="block";
};

至少从我的代码中可以看出，questionOne最初设置为display="none"，而我找不到将其设置为display="block"

的javascript代码

javascript实现错误

1 个答案: