Can anyone figure this out?

Question

class Token {
    constructor(index, owner){
        this.owner = owner;
        this.id = token-${index}-${owner.id};
        this.dropped = false;
        this.columnLocation = 0;
    }
/** 
 * Gets left offset of html element.
 * @return  {number}   Left offset of token object's htmlToken.
 */
 get offsetLeft() {
    return this.htmlToken.offsetLeft;
}
   /** 
 * Draws new HTML token.
 */
drawHTMLToken(){
    const token = document.createElement('div');
    document.getElementById('game-board-underlay').appendChild(token);
    token.setAttribute('id', this.id);
    token.setAttribute('class', 'token');
    token.style.backgroundColor = this.owner.color;
}
/** moves token to left */

moveLeft(){
    if (this.columnLocation > 0 ) {
        this.htmlToken.style.left = this.offsetLeft -76;
        //this.htmlToken.style.left = (this.columnLocation - 1) * 76;
        this.columnLocation -= 1;
    }
}
I'm getting this error code 
TypeError: Cannot read property 'offsetLeft' of undefined

jb30 · Accepted Answer

javascript
constructor(index, owner){ 
    this.owner = owner; 
    this.id = `token-${index}-${owner.id}`; 
    this.dropped = false; 
    this.columnLocation = 0; 
}

In your constructor, you set the properties owner, id, dropped, and columnLocation, but you haven't defined a property called htmlToken, so the value for this.htmlToken is undefined.  You then tried to use the value in your getter
javascript
get offsetLeft() {
    return this.htmlToken.offsetLeft;
}

Since this.htmlToken is undefined, this is equivalent to returning undefined.offsetLeft, which gives you a TypeError.
You could solve the issue by including a value for a property htmlToken within your constructor.

Welcome to the Treehouse Community

Looking to learn something new?

mark Marley

mark Marley

Can anyone figure this out?

1 Answer

jb30

jb30

mark Marley

mark Marley