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()

4
BlackC4t 19 Aug. 2020 im 16:05

2 Antworten

Beste Antwort

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();
2
Jeremy Thille 19 Aug. 2020 im 13:12
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)
2
Darth 19 Aug. 2020 im 13:10