我将尝试仅发布程序的重要部分。如果需要更多代码,请告诉我。
main.html
<html>
<head>
<title>Mathematician</title>
<meta charset=UTF8 />
</head>
<body>
<span id=player_information>
</span>
<hr />
<span id=exercises>
</span>
</body>
<script src="script.js"></script>
</html>
script.js(压缩版)
class Exercises
{
constructor(player, number_of_exercises)
{
this.player = player;
this.exercises = [];
for (var i = 0; i < number_of_exercises; i++)
{
var exercise = new Exercise();
var exercise_display = document.createTextNode(exercise);
var input_field = document.createElement("input");
var list_element = [exercise, exercise_display, input_field];
this.exercises.push(list_element);
}
}
display()
{
var exercises_area = document.getElementById("exercises");
for (var i = 0; i < this.exercises.length; i++)
{
exercises_area.append(this.exercises[i][1]);
exercises_area.append(this.exercises[i][2]);
exercises_area.append(document.createElement("br"));
}
var check_button = document.createElement("button");
check_button.innerHTML = "Check";
check_button.onclick = this.check_exercises;
exercises_area.append(check_button);
}
check_exercises()
{
for (var i = 0; i < this.exercises.length; i++)
{
if (this.exercises[i][0].check_guess(this.exercises[i][2].value)) {
alert("That was wright!");
}
}
}
}
...
var player = new Player();
player.display();
var exercises = new Exercises(player, 10);
exercises.display();
该程序生成练习,并在其中显示文本和输入字段的状态下显示您可以输入解决方案的练习。如果单击复选按钮,则会收到以下错误消息:
TypeError: this.exercises is undefined
我的错是什么?我试图弄清楚,但此错误消息对我而言没有任何意义。
答案 0 :(得分:1)
在构造函数中,您要将this
绑定到显示和check_exercises函数。
尝试:
constructor(player, number_of_exercises)
{
...code...
this.check_exercises = this.check_exercises.bind(this)
this.display = this.display.bind(this)
}
“ right”也拼写为没有“ w”;)
答案 1 :(得分:0)
为了将this
用作类对象,必须将this
对象绑定到函数。
因为函数中的this
对象基本上是指调用该对象的this
对象。
让我们说您是否有一个HTML
代码,如下:
<button onclick=Display()>Display</button>
在这种情况下,this
对象将引用button
,并且由于button
对象没有称为exercise
的任何属性,因此会引发错误为undefined
。
因此,您可以做的是将this
对象在构造函数中绑定为:
constructor()
{
this.display = this.display.bind(this);
}
或者您可以将函数声明为箭头函数:
display=()=>{
//my function code goes here.
}