CODEWITHSUNDEEP
javascriptclassobjectoop
Moiz Ratlamwala
Moiz Ratlamwala

Reputation: 23

Can't changing the value of JavaScript property

class Snake {
    snakeDirection = 'ArrowRight';

    constructor() {
        setInterval(() => {
            this.moveSnake();
        }, 800);

        document.addEventListener('keydown', this.changeDirection);
    }

    moveSnake() {
        console.log('moveSnake', this.snakeDirection) //ArrowRight
    }

    changeDirection(e) {
        this.snakeDirection = e.key;
        console.log('key pressed', e.key)
    }
}

let a = new Snake();

I'm new to javscript and creating a small project using OOPs concept. I am trying to change the value of snakeDirection by calling changeDirection method but it's can't get updated in moveSnake method which is gets called every 800ms. How will I do this?

class Snake {
    snakeDirection = 'ArrowRight';

    constructor() {
        setInterval(() => {
            this.moveSnake();
        }, 800);

        document.addEventListener('keydown', this.changeDirection);
    }

    moveSnake() {
        console.log('moveSnake', this.snakeDirection) //ArrowRight
    }

    changeDirection(e) {
        this.snakeDirection = e.key;
        console.log('key pressed', e.key)
    }
}

let a = new Snake();

Upvotes: 0

Views: 112

Answers (4)

Muhammad Awais Mumtaz
Muhammad Awais Mumtaz

Reputation: 1

This is the problem that I have spotted this.snakeDirection cant be used because it is not in the constructor method. use just snakeDirection = e.key. I mean that it is not the property of the class, it is just a class variable that can't be used as a class property. Class variables and class properties are two different concepts.

Upvotes: 0

Michael Han
Michael Han

Reputation: 1

The reason for the error is 'this' in function changeDidrection that not is Object a. it is Object document. so,Either listener set out of class

class Snake {
            
        
            constructor() {
                setInterval(() => {
                    this.moveSnake();
                }, 800);
                this.snakeDirection = 'ArrowRight';
                document.addEventListener('keydown', changeDirection);
            }
        
            moveSnake() {
                console.log('moveSnake', this.snakeDirection) //ArrowRight
            }
            
        }
        
        let a = new Snake();
        function changeDirection(e) {
            a.snakeDirection = e.key;
            console.log('key pressed', e.key)
        }

or use arrow function

changeDirection = (e) => {
            console.log(e.key)
            this.snakeDirection = e.key;
          }

Upvotes: 0

Andy
Andy

Reputation: 63524

It's a context issue with setInterval. If you change your methods to class properties (basically arrow functions) so that this is understood properly the problem disappears.

class Snake {

  snakeDirection = 'ArrowRight';
  
  constructor() {
    document.addEventListener('keydown', this.changeDirection);
    setInterval(this.moveSnake, 800);
  }
  
  moveSnake = () => {
    console.log('moveSnake', this.snakeDirection);
  }

  changeDirection = (e) => {
    console.log(e.key)
    this.snakeDirection = e.key;
  }

}

let a = new Snake();

Upvotes: 0

Kain Akuma
Kain Akuma

Reputation: 26

You must pass an argument (event) to func.

const snake = new Snake();
document.addEventListener('keydown', e => snake.changeDirection(e));

Upvotes: 1

Related Questions