Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jackson Monk
Jackson Monk
4,527 Points

Why is the style property undefined?

I am using some Object-Oriented JavaScript to make a character that you can move around and shoot bullets from. The character is an image whose position changes every time you press the corresponding arrow key. When you press space, the image should fire bullets. Here is the code:

  this.fire = function(bulletSpeed, bulletColor) {

    document.addEventListener('keydown', (event) => {

    if (event.keyCode == '32') {

    this.bullet = document.createElement('div');
    this.bullet.padding = '10px';
    this.bullet.style.left = parseInt(this.element.style.left);
    this.bullet.style.bottom = parseInt(this.element.style.bottom);
    this.bullet.style.width = '4px';
    this.bullet.style.height = '4px';
    this.bullet.style.backgroundColor = bulletColor;
    this.bullet.style.zIndex = '-5px';
    body.appendChild(this.bullet);


      function shoot() {
        this.bullet.style.left = parseInt(this.bullet.style.left) + bulletSpeed;
      }

      setInterval(shoot, 20);

    }

  });
  }

this.element is the image that I am firing bullets from. However, when I run this, it tells me that in my shoot function, the style property on this.bullet is undefined. Is the this keyword referring now to the shoot function? What else am I doing wrong? Feel free to ask me any other info about this that you might need to solve it.

1 Answer

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hello there! The only syntactical error I was able to pick from your snippet code was that you forgot to put in "style" when adding padding to the bullet. I hope it helped!

.....

this.bullet.style.padding = '10px';
.....

~ Ari

Jackson Monk
Jackson Monk
4,527 Points

Thank you for that correction Ari, that solves one of my problems. The one that stumps me the most is that the bullets show up on the screen, but they appear at the default element position: the top left corner. I have set the position to be the same as my character. Even when you look at the elements in Chome Dev Tools, all the bullet element's left and bottom properties are the same value as my character, yet they are not appearing there. It is very strange

Jackson Monk
Jackson Monk
4,527 Points

Here is the entire program if you need it

window.onload = function() {

let body = document.getElementsByTagName('body')[0];

function Position() {

  this.x = 0;
  this.y = 0;
  this.element;
  this.bullet;

  this.appear = function() {

    this.element = document.createElement('img');
    this.element.src = 'https://mail.google.com/mail/u/0/?          ui=2&ik=c6acbee890&view=att&th=164ce1ed771b2f42&attid=0.1&disp=safe&realattid=f_jk06yza50&zw';
    this.element.style.position = 'absolute';
    this.element.style.left = 8;
    this.element.style.bottom = 10;
    this.element.style.height = '125px';
    this.element.style.width = '160px';
    this.element.className = 'character';
    body.appendChild(this.element);
  }

  this.setPosition = function(x, y) {

     this.x = x;
     this.y = y;
     this.element.style.left += this.x;
     this.element.style.bottom = this.y;
  }

  this.move = function(xspeed, yspeed) {

    document.addEventListener('keydown', (event) => {

    if (event.keyCode == '39') this.element.style.left = parseInt(this.element.style.left) + xspeed;
    if (event.keyCode == '38') this.element.style.bottom = parseInt(this.element.style.bottom) + yspeed;
    if (event.keyCode == '37' && this.element.style.left != 0) this.element.style.left = parseInt(this.element.style.left) - xspeed;
    if (event.keyCode == '40' && this.element.style.bottom != 10) this.element.style.bottom = parseInt(this.element.style.bottom) - yspeed;
  }); 
  }

  this.fire = function(bulletSpeed, bulletColor) {

    document.addEventListener('keydown', (event) => {

    if (event.keyCode == '32') {

    this.bullet = document.createElement('div');
    this.bullet.style.padding = '10px';
    this.bullet.style.left = parseInt(this.element.style.left);
    this.bullet.style.bottom = parseInt(this.element.style.bottom);
    this.bullet.style.width = '10px';
    this.bullet.style.backgroundColor = bulletColor;
    this.bullet.style.zIndex = '-5px';
    body.appendChild(this.bullet);


      function shoot() {
        this.bullet.style.left = parseInt(this.bullet.style.left) + bulletSpeed;
      }

      setInterval(shoot, 20);

    }

  });
  }
}

let character = new Position();

character.appear();
character.move(5, 6);
character.fire(8, 'blue');
};