Question

我的游戏正常运行，直到单击摘要页面开始链接。然后，当我再次尝试播放时，我得到了未定义的变量。

我是JS的新手，所以我确定这是一个愚蠢的用户错误，无法正确处理范围。

如果我在javascript的底部注释了public async method(row: any) { const that = this; let keys = Object.keys(row); return blueBirdPromise.mapSeries(keys, function(tr) { return blueBirdPromise.mapSeries(Object.keys(types), function(type) { return that.getField().then(v => { if (v && v.error) { throw new Error(v.error); } else { if(v !== null) { _.set(row, somekey, v); return row; } } }); }); }); }，那么在计时器计时结束后，它仍然可以正常工作，但是编码分配要求我们不要刷新。感谢您的帮助！

location.reload

$(document).ready(function() {
  var correctAnswers = 0;
  var incorrectAnswers = 0;
  var unansweredQuestions = 0;
  var timeRemaining = 16;
  var intervalID;
  var indexQandA = 0;
  var answered = false;
  var correct;

  var start = $(".start").html("Start Game");
  start.on("click", startGame);

  var triviaQandA = [{
    question: "What is the fastest animal?",
    answer: ["cheetah", "turtle", "giraffe", "elephant"],
    correct: "0",
    image: ("assets/images/circle.png")
  }, {
    question: "When you are blue you turn?",
    answer: ["red", "green", "blue", "yellow"],
    correct: "2",
    image: ("assets/images/dot.jpg")
  }];

  function startGame() {
    $(".start").hide();
    correctAnswers = 0;
    incorrectAnswers = 0;
    unansweredQuestions = 0;
    loadQandA();
  }

  function loadQandA() {
    answered = false;
    timeRemaining = 16;
    intervalID = setInterval(timer, 1000);
    if (answered === false) {
      timer();
    }

    correct = triviaQandA[indexQandA].correct;
    var question = triviaQandA[indexQandA].question;
    $(".question").html(question);
    for (var i = 0; i < 4; i++) {
      var answer = triviaQandA[indexQandA].answer[i];
      $(".answers").append("<h4 class = answersAll id =" + i + ">" + answer + "</h4>");
    }

    $("h4").click(function() {
      var id = $(this).attr("id");
      if (id === correct) {
        answered = true;
        $(".question").text("The answer is: " + triviaQandA[indexQandA].answer[correct]);
        correctAnswer();
      } else {
        answered = true;
        $(".question").text("You chose: " + triviaQandA[indexQandA].answer[id] + "    the correct answer is: " + triviaQandA[indexQandA].answer[correct]);
        incorrectAnswer();
      }
      console.log(correct);
    });
  }

  function timer() {
    if (timeRemaining === 0) {
      answered = true;
      clearInterval(intervalID);
      $(".question").text("The correct answer is: " + triviaQandA[indexQandA].answer[correct]);
      unAnswered();
    } else if (answered === true) {
      clearInterval(intervalID);
    } else {
      timeRemaining--;
      $(".timeRemaining").text("You have " + timeRemaining);
    }
  }

  function correctAnswer() {
    correctAnswers++;
    $(".timeRemaining").text("You are spot on!!!").css({
      "color": "#3d414f"
    });
    reset();
  }

  function incorrectAnswer() {
    incorrectAnswers++;
    $(".timeRemaining").text("You are sooo wrong").css({
      "color": "#3d414f"
    });
    reset();
  }

  function unAnswered() {
    unansweredQuestions++;
    $(".timeRemaining").text("You didn't choose anything...").css({
      "color": "#3d414f"
    });
    reset();
  }

  function reset() {
    $(".answersAll").remove();
    $(".answers").append("<img class=answerImage width='150' height='150' src='" + triviaQandA[indexQandA].image + "'>");
    indexQandA++;
    if (indexQandA < triviaQandA.length) {
      setTimeout(function() {
        loadQandA();
        $(".answerImage").remove();
      }, 2000);
    } else {
      setTimeout(function() {
        $(".question").remove();
        $(".timeRemaining").remove();
        $(".answerImage").remove();
        $(".answers").append("<h4 class = answersAll end>Correct answers: " + correctAnswers + "</h4>");
        $(".answers").append("<h4 class = answersAll end>Wrong answers: " + incorrectAnswers + "</h4>");
        $(".answers").append("<h4 class = answersAll end>Unanswered questions: " + unansweredQuestions + "</h4>");
        correctAnswers = 0;
        incorrectAnswers = 0;
        unansweredQuestions = 0;
        // setTimeout(function() {
        //     location.reload();
        // }, 5000);

        var start = $(".start-over").html("Start Game");
        start.on("click", startGame);
      }, 2000);
    }
  };


});

这里是我Codepen的内联链接。

Answer 1

问题出在您对每个问题递增indexQandA，但从未对其进行重置的事实。开始新游戏时，需要将其重置为0-也就是说，在else函数的reset子句中，您需要将indexQandA=0放在将其他变量重置为0的位置

尽管这样做还有一个问题，测验现在可以第二次运行了，但是不再显示问题了。这是因为您在.question期间删除了reset元素。您不需要这样做，您可以将其隐藏，然后在游戏重新启动时再次显示。

实际上，它显示出还有其他问题。我已经解决了它-连续运行了5次，没有明显的问题-使用以下代码（我没有断言这是正确的代码，对现有代码所做的改动很小它可以正常工作）：

$(document).ready(function() {

var correctAnswers = 0;
var incorrectAnswers = 0;
var unansweredQuestions = 0;
var timeRemaining = 16;
var intervalID;
var indexQandA = 0;
var answered = false;
var correct;
    
    var start = $(".start").html("Start Game");
    start.on("click", startGame);
  $(".start-over").on("click", startGame);
    
var triviaQandA = [{
    question:"What is the fastest animal?",
    answer:["cheetah","turtle","giraffe","elephant"],
    correct:"0",
    image: ("assets/images/circle.png")
}, { 
    question:"When you are blue you turn?",
    answer:["red","green","blue","yellow"],
    correct:"1",
    image: ("assets/images/dot.jpg")
}];

function startGame() {
    $(".summary").hide();
    $(".start").hide();
    $(".timeRemaining").show();
    $(".question").show();
    $(".answers").show();
    $(".start-over").hide();
    correctAnswers = 0;
    incorrectAnswers = 0;
    unansweredQuestions = 0;
    loadQandA();
}

function loadQandA() {
    answer = [];
    answered = false;
    timeRemaining = 16;
    timer();
    intervalID = setInterval(timer, 1000);
    /*if (answered === false) {
        timer();
    }*/
    
    correct = triviaQandA[indexQandA].correct;
    var question = triviaQandA[indexQandA].question;
    $(".question").html(question);
    for (var i = 0; i < 4; i++) {
        var answer = triviaQandA[indexQandA].answer[i];
        $(".answers").append("<h4 class = answersAll id =" + i + ">" + answer + "</h4>");
    }

    $("h4").click(function() {
        var id = $(this).attr("id");
        if (id === correct) {
            answered = true;
            $(".question").text("The answer is: " + triviaQandA[indexQandA].answer[correct]);
            correctAnswer();
        } else {
            answered = true;
            $(".question").text("You chose: " + triviaQandA[indexQandA].answer[id] + "    the correct answer is: " + triviaQandA[indexQandA].answer[correct]);
            incorrectAnswer();
        }
        console.log(correct);
    });
}

function timer() {
    if (timeRemaining === 0) {
        answered = true;
        //clearInterval(intervalID);
        $(".question").text("The correct answer is: " + triviaQandA[indexQandA].answer[correct]);
        unAnswered();
    } else if (answered === true) {
        //clearInterval(intervalID);
    } else {
        timeRemaining--;
        $(".timeRemaining").text("You have " + timeRemaining);
    }
}

function correctAnswer() {
    correctAnswers++;
    $(".timeRemaining").text("You are spot on!!!").css({
        "color": "#3d414f"
    });
    reset();
}

function incorrectAnswer() {
    incorrectAnswers++;
    $(".timeRemaining").text("You are sooo wrong").css({
        "color": "#3d414f"
    });
    reset();
}

function unAnswered() {
    unansweredQuestions++;
    $(".timeRemaining").text("You didn't choose anything...").css({
        "color": "#3d414f"
    });
    reset();
}

function reset() {
      clearInterval(intervalID);
    $(".answersAll").remove();
    $(".answers").append("<img class=answerImage width='150' height='150' src='" + triviaQandA[indexQandA].image + "'>");
    indexQandA++;
    if (indexQandA < triviaQandA.length) {
        setTimeout(function () {
            loadQandA();
            $(".answerImage").remove();
        }, 2000);
    } else {
        setTimeout(function() {
            $(".summary").show();
            $(".question").hide();
            $(".timeRemaining").hide();
            $(".answers").hide();
            $(".start-over").show();
            $(".answerImage").remove();
            $(".summary").append("<h4 class = answersAll end>Correct answers: " + correctAnswers + "</h4>");
            $(".summary").append("<h4 class = answersAll end>Wrong answers: " + incorrectAnswers + "</h4>");
            $(".summary").append("<h4 class = answersAll end>Unanswered questions: " + unansweredQuestions + "</h4>");
            correctAnswers = 0;
            incorrectAnswers = 0;
            unansweredQuestions = 0;
            indexQandA=0;
            // setTimeout(function() {
            //     location.reload();
            // }, 5000);
    
            $(".start-over").html("Start Game");
            start.on("click", startGame);
        }, 2000);
    }
};

    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="start"></div>
    <h1>Trivia</h1>
    <h5 class="timeRemaining"></h5>
    <h3 class="question"></h3>
    <div class="answers"></div>
    <div class="summary"></div>
    <div class="start-over"></div>

</body>
</html>

您的代码最初有两个主要问题：

最重要的是，每次调用startGame函数时，您都将click添加为“重新开始”按钮的reset处理程序。结果，在您播放第3，第4，第5…时，添加了多个此类处理程序，结果startGame函数被调用了多次，这就是为什么要获取答案选项打印多次。我已通过完全删除该部分代码并在页面加载时添加一次事件侦听器来解决此问题。
您的计时器也有点麻烦，因为您手动调用timer函数以及使用setInterval每秒运行一次，并且在问题出现时也不总是清除它回答。我已经大大简化了此过程，使其工作了，只需像以前一样在loadQandA中设置计时器，然后在reset函数中将其清除即可。

您会发现我主要是在评论内容，而不是删除它们-希望这将使查看我删除的内容更加容易。

Javascript＆JQuery Trivia游戏第二轮未定义的范围

1 个答案: