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 Studio Fomalhaut
Studio Fomalhaut
2,019 Points

Uncaught TypeError: Cannot read property 'style' of undefined

I am getting an error in the Token.js file for:

this.htmlToken.style.left = this.offsetLeft + 76;

Any idea why? Thanks

5 Answers

Podrig Leoghain
Podrig Leoghain
5,094 Points
Podrig Leoghain
Podrig Leoghain
5,094 Points

Just a guess but is this.htmlToken.style.left meant to be all one word?

Studio Fomalhaut
Studio Fomalhaut
2,019 Points
Studio Fomalhaut
Studio Fomalhaut
2,019 Points

Hi Podrig,

Yes, it's exactly as in the files, and the video answer...

moveRight(columns){
    if (this.columnLocation < columns -1){                          
        this.htmlToken.style.left = this.offsetLeft + 76;
        this.columnLocation += 1;
    }
}
Podrig Leoghain
Podrig Leoghain
5,094 Points

Could you paste the error message here please?

Studio Fomalhaut
Studio Fomalhaut
2,019 Points
Studio Fomalhaut
Studio Fomalhaut
2,019 Points

Yes, it says:

Token.js:45 Uncaught TypeError: Cannot read property 'style' of undefined at Token.moveRight (Token.js:45) at Game.handleKeydown (Game.js:39) at HTMLDocument.<anonymous> (app.js:16)

Podrig Leoghain
Podrig Leoghain
5,094 Points

Could you post all the code? The error message indicates a problem occuring due to something on line 39 too.

Studio Fomalhaut
Studio Fomalhaut
2,019 Points
Studio Fomalhaut
Studio Fomalhaut
2,019 Points

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

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; 
}

get htmlToken(){
    this.drawHTMLToken();
}

get offsetLeft(){
    return this.htmlToken.offsetLeft;
}


moveLeft(){
    if (this.columnLocation > 0){
        this.htmlToken.style.left = 76 - this.offsetLeft; 
        this.columnLocation -= 1;
    }
}

moveRight(columns){
    if (this.columnLocation < columns -1){                           //b/c index is 0
        this.htmlToken.style.left = this.offsetLeft + 76;
        this.columnLocation += 1;
    }
}

drop(target, reset){
    this.dropped = true;

    $(this.htmlToken).animate({
        top: (target.y * target.diameter)
    }, 750, 'easeOutBounce', reset);
}

}

class Game { constructor(){ this.board = new Board(); this.players = this.createPlayers(); this.ready = false; }

createPlayers(){
    const players = [new Player('John', 1, '#e15258', true), 
                     new Player('Jane', 2, '#e59a13')];
    return players;
}

startGame(){
    this.board.drawHTMLBoard();
    this.activePlayer.activeToken.drawHTMLToken();
    this.ready = true;
}

get activePlayer(){
    return this.players.find(player => player.active);
}

handleKeydown(event){
    if (this.ready){
        if (event.key === 'ArrowRight'){
            this.activePlayer.activeToken.moveRight(this.board.columns);
        } else if (event.key === 'ArrowLeft'){
            this.activePlayer.activeToken.moveLeft();
        } else if (event.key === 'ArrowDown'){
            this.playToken();

        }
    }
}

playToken(){
    let spaces = this.board.spaces;
    let activeToken = this.activePlayer.activeToken;
    let targetColumn = spaces[activeToken.columnLocation];
    let targetSpace = null;

    for (let space of targetColumn){
        if (space.token === null){
            targetSpace = space;
        }
    }

    if (targetSpace != null){
        game.ready = false;
        activeToken.drop(targetSpace);
    }
}

}

const game = new Game();

let startButton = document.getElementById('begin-game'); startButton.addEventListener('click', function(){

game.startGame(),
this.style.display = 'none';
document.getElementById('play-area').style.opacity = '1';

});

document.addEventListener('keydown', function(event){ game.handleKeydown(event); });

Thank you!!

Studio Fomalhaut
Studio Fomalhaut
2,019 Points

Sorry about the wacky editing. I'm new here.

Podrig Leoghain
Podrig Leoghain
5,094 Points

I'm so far behind you on JS that I'm going to ask some others to help. Robin Westerhof or Jonathan Grieve, can either of you help here? Good luck!

Noelle Szombathy
Noelle Szombathy
10,043 Points
Noelle Szombathy
Noelle Szombathy
10,043 Points

I know this thread is old, but I was getting this error and found a solution for anyone else experiencing this issue:

get htmlToken(){
    this.drawHTMLToken();
}

First, your getter method needs the return keyword. Second, with your code right now each time the getter method is called, you're essentially rendering a new token. Instead, you should be returning the html div that was created when the startGame() method ran.

Your code should read:

get htmlToken(){
    return document.getElementById(this.id);
}