如何解决每当我在另一个方法中调用一个方法时,我都会得到TypeError无法读取未定义的信息
我对JS还是很陌生,我正在构建一个项目,但是进展不大。我有一个名为AppContainer的类,并且在内部试图创建将运行琐事游戏的逻辑。我有一种方法在工作(startTrivia)。但是当我尝试在其中调用/使用其他方法(getQuestions)时,我得到了错误:
“未捕获的TypeError:无法读取未定义的属性'getQuestions'”。 *
我尝试将方法放置在被调用的方法之上,但还是没有运气。我还尝试过先将方法存储在变量中,并且仍然存在相同的错误。
也许我想做的事不可能吗?非常感谢您的帮助。 (对不起,注释过多的代码)
class AppContainer {
questions = [];
themes = [];
url = "http://localhost:3000";
score = {};
btn1 = document.getElementById("person");
btn2 = document.getElementById("species");
btn3 = document.getElementById("spaceships");
btn4 = document.getElementById("planets");
btn5 = document.getElementById("films");
btn6 = document.getElementById("vehicles");
allButtons = document.getElementById("all-start");
bindEventListener() {
const allButtons = this.allButtons;
const startTrivia = this.startTrivia;
this.btn1.addEventListener("click", function (event) {
//event.stopPropagation();
allButtons.style.visibility = "hidden";
console.log(event);
startTrivia(event);
});
this.btn2.addEventListener("click", function (event) {
//event.stopPropagation();
allButtons.style.visibility = "hidden";
startTrivia(event);
});
this.btn3.addEventListener("click", function (event) {
//event.stopPropagation();
allButtons.style.visibility = "hidden";
startTrivia(event);
});
this.btn4.addEventListener("click", function (event) {
//event.stopPropagation();
allButtons.style.visibility = "hidden";
startTrivia(event);
});
this.btn5.addEventListener("click", function (event) {
//event.stopPropagation();
allButtons.style.visibility = "hidden";
startTrivia(event);
});
this.btn6.addEventListener("click", function (event) {
//event.stopPropagation();
allButtons.style.visibility = "hidden";
startTrivia(event);
});
}
startTrivia(elem) {
const triviaBox = document.getElementById("trivia-container");
let firstButton = document.getElementById("person");
//const getQuestions = this.getQuestions;
//checking to see if the event target constains a specific classList button
//if (elem.target.classList.contains("start-btn-person")) {
// console.log('OHHHH YEAAAH!');
//triviaBox.style.visibility = "visible";
//console.log("how do we pivot?");
// this.getQuestions();
//}
console.log(elem.target)
if (elem.target == firstButton) {
console.log("Eurerka!")
triviaBox.style.visibility = "visible";
this.getQuestions();
} else {
console.log("it didnt work")
};
}
getQuestions() { // make fetch request to /questions, then call renderQuestions
fetch(this.url + "/questions") .then((resp) => resp.json())
//populate the questions and theme properties with the returned data
.then((data) => {
data.forEach((question) => {
new Question(question.name, question.theme);
});
this.renderQuestions();
}) .catch((err) => alert(err));
}
renderQuestions() { // creat DOM nodes and insert data into them to render in the DOM
const personButton = document.getElementById("person");
const filmsButton = document.getElementById("films");
const spaceshipsButton = document.getElementById("spaceships");
const speciesButton = document.getElementById("species");
const vehiclesButton = document.getElementById("vehicles");
const planetsButton = document.getElementById("planets");
this.questions.forEach((question) => {
const option = document.createElement("option");
option.innerText = question.name;
//switch (question.theme.name) {
// case "person":
// personButton.appendChild(option);
// break;
// case "films":
// filmsButton.appendChild(option);
// break;
// case "spaceships":
// spaceshipsButton.appendChild(option);
// break;
// case "species":
// speciesButton.appendChild(option);
// break;
// case "vehicles":
// vehiclesButton.appendChild(option);
// break;
// case "planets":
// planetsButton.appendChild(option);
// break;
// default:
//code block
// }
});
document.body.appendChild(option);
}
}
const app = new AppContainer;
app.bindEventListener();
//app.startTrivia();
app.getQuestions()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。