using objects to get position (x, y) - Javascript

Question

this code works:

var myElement = document.getElementById("red"); 
    setInterval(function() {
        console.log("Left:" + myElement.offsetLeft + "px | Top:" + myElement.offsetTop + "px");
    }, 1000);

This prints out the position(x, y) every second

But If I try and change it to using objects:

function Enemy(id){
    this.id = getElementById(id);
    this.getCoordinates = function(){
        setInterval(function() {
            console.log("Left:" + this.id.offsetLeft + "px | Top:" + this.id.offsetTop + "px");
        }, 1000);
    }
}

$(document).ready(function(){
    var enemy = new Enemy("red");
    enemy.getCoordinates();

});

It prints out nothing - and I can't see where my mistake is.

getElementById is not a global function, use document.getElementById — Krzysiek
– Krzysiek, Commented Sep 5, 2013 at 20:38

slebetman · Accepted Answer · 2013-09-05 20:44:23Z

4

In a setInterval or setTimeout (or any event handler like onclick) the this variable refers to the global object. In a browser that's window.

In modern browsers you can do this:

setInterval((function() {
        console.log("Left:" + that.id.offsetLeft + "px");
    }).bind(this), 1000); // <------- bind

Otherwise all other solutions are basically similar to your first piece of code.

Note that there is an implementation of bind() in pure js from Mozilla that can be ported to older browsers. Search for it on MDN.

edited Sep 5, 2013 at 20:44

answered Sep 5, 2013 at 20:38

slebetman

115k19 gold badges148 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

patrickomatic · Accepted Answer · 2013-09-05 20:39:48Z

2

The problem is that the value of "this" is changing within the setInterval. The fix is to change it to:

function Enemy(id){
  this.id = document.getElementById(id);

  var self = this;
  this.getCoordinates = function(){
    setInterval(function() {
        console.log("Left:" + self.id.offsetLeft + "px | Top:" + self.id.offsetTop + "px");
    }, 1000);
  }
}

answered Sep 5, 2013 at 20:39

patrickomatic

312 bronze badges

1 Comment

Paul Roub Over a year ago

You'll want to qualify document.getElementById(), too.

Krzysiek · Accepted Answer · 2013-09-05 20:41:03Z

1

function Enemy(id){
    this.id = document.getElementById(id);
    this.getCoordinates = function(){
        var element = this.id;
        setInterval(function() {
            console.log("Left:" + element.offsetLeft + "px | Top:" + element.offsetTop + "px");
        }, 1000);
    }
}

$(document).ready(function(){
    var enemy = new Enemy("red");
    enemy.getCoordinates();

});

answered Sep 5, 2013 at 20:41

Krzysiek

2,51419 silver badges21 bronze badges

Comments

Joe Simmons · Accepted Answer · 2013-09-05 20:40:38Z

0

As slebetman said, the 'this' variable is not what you expected. Try saving it in a 'that' variable, which can be accessed in different scopes.

function Enemy(id){
    var that = this; // reference to 'this' that can be used in other scopes
    that.id = document.getElementById(id);
    that.getCoordinates = function(){
        setInterval(function() {
            console.log("Left:" + that.id.offsetLeft + "px | Top:" + that.id.offsetTop + "px");
        }, 1000);
    }
    return that;
}

answered Sep 5, 2013 at 20:40

Joe Simmons

1,8582 gold badges12 silver badges9 bronze badges

Collectives™ on Stack Overflow

using objects to get position (x, y) - Javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related