Error "Uncaught TypeError" when changing this object propety- JavaScript

user_10465707 0
Viewed 40

I am learning about objects and prototypes in JavaScript and I got stuck. My aim is to create an object which then gets drawn onto a page. I have created another prototype constructor so later the this specific created object can be moved on a page however it doesn't work and I don't know how to progress further with it

here is my 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";
}

and then in console log (this works):

var sunflower = new Bunny(200, 200);
sunflower.drawBunny();

but when I write this in console log:

sunflower.moveRight();

I get this error:

Uncaught TypeError: this.bunnyImage is undefined

pointing at this.bunnyImage in moveRight() function

javascript-objects javascript
2 Answers

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)

user_47824230

Define "It doesn't work" (this statement alone is not enough to help). In your case, the console says :

Uncaught TypeError: Cannot read property 'style' of undefined

Indeed, this.bunnyImage is undefined. You forgot to store it in your function with this.bunnyImage = bunnyImage;

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

user_10217030
Related