Ich lerne über Objekte und Prototypen in JavaScript und stecke fest. Mein Ziel ist es, ein Objekt zu erstellen, das dann auf eine Seite gezeichnet wird. Ich habe einen anderen Prototyp-Konstruktor erstellt, damit dieses speziell erstellte Objekt später auf einer Seite verschoben werden kann. Es funktioniert jedoch nicht und ich weiß nicht, wie ich damit fortfahren soll
Hier ist mein JS:
var Bunny = function (x, y) {
this.x = x;
this.y = y;
}
Bunny.prototype.drawBunny = function () {
var bunnyImage = document.createElement('img');
bunnyImage.src = "https://64.media.tumblr.com/tumblr_m06yweMXBl1qaajuxo1_500.gif";
bunnyImage.style.position = "absolute";
bunnyImage.style.left = this.x + "px";
bunnyImage.style.top = this.y + "px";
document.getElementsByTagName("body")[0].appendChild(bunnyImage);
}
Bunny.prototype.moveRight = function() {
this.x += 5;
this.bunnyImage.style.left = this.x + "px";
this.bunnyImage.style.top = this.y + "px";
}
Und dann im Konsolenprotokoll (das funktioniert):
var sunflower = new Bunny(200, 200);
sunflower.drawBunny();
Aber wenn ich dies in das Konsolenprotokoll schreibe:
sunflower.moveRight();
Ich erhalte diesen Fehler:
Nicht gefangener TypeError: this.bunnyImage ist undefiniert
Zeigen auf this.bunnyImage in der Funktion moveRight()
2 Antworten
Definieren Sie "Es funktioniert nicht" (diese Aussage allein reicht nicht aus, um zu helfen). In Ihrem Fall sagt die Konsole:
Nicht erfasster TypeError: Die Eigenschaft 'style' von undefined kann nicht gelesen werden
In der Tat ist this.bunnyImage undefiniert. Sie haben vergessen, es in Ihrer Funktion mit this.bunnyImage = bunnyImage; zu speichern
var Bunny = function(x, y) {
this.x = x;
this.y = y;
}
Bunny.prototype.drawBunny = function() {
var bunnyImage = document.createElement('img');
bunnyImage.src = "https://64.media.tumblr.com/tumblr_m06yweMXBl1qaajuxo1_500.gif";
bunnyImage.style.position = "absolute";
bunnyImage.style.left = this.x + "px";
bunnyImage.style.top = this.y + "px";
this.bunnyImage = bunnyImage;
document.getElementsByTagName("body")[0].appendChild(bunnyImage);
}
Bunny.prototype.moveRight = function() {
this.x += 5;
this.bunnyImage.style.left = this.x + "px";
this.bunnyImage.style.top = this.y + "px";
}
var sunflower = new Bunny(200, 200);
sunflower.drawBunny();
sunflower.moveRight();var Bunny = function (x, y) {
this.x = x;
this.y = y;
}
Bunny.prototype.drawBunny = function () {
this.bunnyImage = document.createElement('img');
this.bunnyImage.src = "https://64.media.tumblr.com/tumblr_m06yweMXBl1qaajuxo1_500.gif";
this.bunnyImage.style.position = "absolute";
this.bunnyImage.style.left = this.x + "px";
this.bunnyImage.style.top = this.y + "px";
document.getElementsByTagName("body")[0].appendChild(this.bunnyImage);
}
Bunny.prototype.moveRight = function(delta = 5) {
this.x += delta;
this.bunnyImage.style.left = this.x + "px";
this.bunnyImage.style.top = this.y + "px";
}
var sunflower = new Bunny(200, 0);
sunflower.drawBunny();
// Lets dance
setInterval(() => {
sunflower.moveRight(200 * (.5 - Math.random()))
}, 200)