Can't changing the value of JavaScript property

Question

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();

Kain Akuma · Accepted Answer · 2022-04-02 06:09:39Z

1

You must pass an argument (event) to func.

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

answered Apr 2, 2022 at 6:09

Kain Akuma

262 bronze badges

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

2 Comments

Moiz Ratlamwala Over a year ago

but why the old method didn't work and this did?

Kain Akuma Over a year ago

Because your methods use event from argument. That's why we passing event in callback function.

Andy · Accepted Answer · 2022-04-02 06:14:10Z

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();

Michael Han · Accepted Answer · 2022-04-02 06:44:41Z

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

Muhammad Awais Mumtaz · Accepted Answer · 2022-04-02 16:16:58Z

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.

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Can't changing the value of JavaScript property

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Related