Das Ziel meiner Website ist also ein einfaches Quizspiel. Es erhält eine Reihe von JSON-Fragen mit AJAX und dann für jede Frage im Array zeigt es die eigentliche Frage und erstellt Schaltflächen mit allen Arten von Optionen zur Auswahl, die auch im Frageobjekt gespeichert wurden. Ich kann es auch nicht funktionieren lassen. Wenn Sie auf eine Schaltfläche klicken, sollte es zum nächsten Frage-Objekt im JSON-Array gehen. Ich verwende ein Quiz-Objekt, um das zu verfolgen. Jetzt bekomme ich Fehler beim Erstellen der Objekte, nicht wenn ich sie als Instanzen initiiere. Erstellen eines Funktionskonstruktors Unentdeckter Typfehler beim Kompilieren zur Laufzeit ohne Instanz
Wenn ich versuche, ein neues QuestionHandler Objekt zu erstellen, indem es durch eine getQuestionhandler Funktion zurückkehrt, es gibt mir diese als Fehler in den Chrome Entwickler-Tools:
Uncaught TypeError: Cannot read property 'undefined' of undefined
at getQuestionHandler (Handlers.js:95)
at new QuizGame (Handlers.js:68)
at QuizIndex.html:37
Das ist meine ganze Code ohne CSS-Styling:
/*function GetJsonQuestions(){
var url = "https://api.myjson.com/bins/10t76x";
$.ajax({
url: url,
data: "json",
success: function(){
console.log("get is successfull");
},
dataType: dataType
});
}*/
var urlJson = "https://api.myjson.com/bins/10t76x";
var QuestionHandler = function(question, options, answer) {
this.question = question;
this.options = options;
this.answer = answer;
this.isCorrect = function(guess) {
if (this.answer === guess) {
return true;
}
};
};
var PointsHandler = function() {
this.points = 0;
this.addPoint = function() {
this.points++;
};
};
var getAllData = function() {
var allData = null;
$.ajax({
url: urlJson,
type: 'GET',
dataType: 'json', // added data type
success: function(res) {
console.log(res);
allData = res.questions;
},
error: function(err) {
console.log("error: " + err);
}
});
return allData;
};
var QuizGame = function() {
this.index = 0;
this.allJsonData = getAllData();
this.pointHandler = getPointsHandler();
this.questionHandler = getQuestionHandler();
this.gameResult = getResult();
this.getPoints = function() {
return this.pointHandler.points;
};
this.nextQuestion = function(quess) {
index++;
var correct = questionHandler.isCorrect(guess);
if (correct) {
pointsHandler.addPoints();
}
};
function getPointsHandler() {
var handler = new PointsHandler();
return handler;
}
function getResult() {
return "You answered " + this.points + " correct out of " + this.index + " questions";
}
function getQuestionHandler() {
var qHandler = new QuestionHandler(this.allJsonData[this.index].question, this.allJsonData[this.index].options, this.allJsonData[this.index].answer);
return qHandler; //this function seems to be giving the error
}
};
var myQuiz = new QuizGame();
console.log(myQuiz.allJsonData);
$("#question").text("Question nr " + myQuiz.index + " : " + myQuiz.questionHandler.question);
$.each(myQuiz.questionHandler.options, function(i, val) {
$("#options").append("<button>" + val + "</button>");
});
$("button").click(function(e) {
if (myQuiz.index <= myQuiz.allJsonData.length) {
myQuiz.nextQuestion(e.target.nodeValue);
}
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quizStyle.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
</script>
<script src="Handlers.js"></script>
<title>Quiz time</title>
</head>
<body>
<h1></h1>
<div id="quizDiv">
<p>Question:</p>
<h2 id="question">Test</h2>
<p>Answers:</p>
<div id="options">
</div>
</div>
<div id="resultDiv">
<p id="yourResult">You got x out x right!</p>
</div>
<script>
</script>
</body>
</html>Was den Fehler verursacht, und wie kann ich es beheben?
Was ist Ihre Linie genau 95? – Galago
Sie rufen 'getQuestionHandler' ohne den Kontext auf. Siehe [Wie funktioniert das this-Schlüsselwort?] (Http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work/3127440#3127440). Beachten Sie, dass es im Code weitere ähnliche Probleme gibt. – Teemu