个人中心
gpt4 book ai didi

JavaScript 执行错误

转载 作者：行者123 更新时间：2023-11-28 01:32:19 25 4
gpt4 key购买 nike

我只是编写一个小测验来教 friend html 和 javascript 基础知识。我得到的 html 和 javascript 都没有语法错误之类的。 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(它包含一些用于新问题的空 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>

最佳答案

如果我正确理解您的问题并且按下“执行”按钮后问题没有出现，那么您似乎在事件中丢失了一些代码:

//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的javascript代码=“ block ”

关于JavaScript 执行错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21966328/

25 4 0
文章推荐： javascript - 如何根据数组中的项目显示 Accordion 组
文章推荐： css - 如何将 Bootstrap 选项卡设置为自动宽度？
文章推荐： javascript - 在自动建议中使用上下键向上/向下切换
文章推荐： html - 将缩略图宽度与其父图像对齐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com