# Listener must be a function. Key down + function with arguments

**URL:** <https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152>\
**Category:** Phaser 3\
**Created:** [April 18, 2019, 2:36pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152 "2019-04-18T14:36:00Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheHaricover](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@TheHaricover](https://phaser.discourse.group/u/TheHaricover)\
**Post date:** [April 18, 2019, 2:36pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/1 "2019-04-18T14:36:00Z")

</div>

Hi.

So, I wrote a simple line of code to listen to the key “Enter” down event.  
Here’s the line : `this.scene.scene.input.keyboard.on('keydown-' + 'Enter', onArrowClicked,this);`

So !  
`this.scene.scene` because when I took the example from the “Notes of Phaser 3”, my code told me “scene is undefined”.

Then, I tried to send arguments in “onArrowClicked” from all the possible ways. I always had the error “The listener must be a function”.

I also had a weird behaviour. In the called function (“onArrowClicked”) I MUST put a condition because an event (“type:“load””) is acting just like the keydown event is activated every second (probably every tick).

I suppose you need my entire code. I hope not, because I can’t put it on jsbin or codepen as the sprites (even phaser’s sprites (“red”,“sky”,“logo”)) don’t work.  
So yeah, I corrected everything (with weird code xD). But know I can’t launch the function on pressing “Enter” (“Enter” is working as I listen to every key and print them and “Enter” works).

---

<div class="post-metadata">

**Author:** ![prob](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prob/32/628_2.png) [@prob](https://phaser.discourse.group/u/prob)\
**Post date:** [April 18, 2019, 2:49pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/2 "2019-04-18T14:49:47Z")

</div>

Yes, you should codepen your entire code. You can host images in a cloud solution (dropbox, google drive) and link to them.

---

<div class="post-metadata">

**Author:** ![TheHaricover](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@TheHaricover](https://phaser.discourse.group/u/TheHaricover)\
**Post date:** [April 18, 2019, 3:15pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/3 "2019-04-18T15:15:55Z")

</div>

Okay, I did it.  
Sprites still aren’t working, but you can click on the black boxes to use the script as it should be used.  
Just imagine that the box on the right is a big arrow to the right and the box to the left is a big arrow to the left.  
But nevermind, that’s not the problem here. The real problem is that “Enter” isn’t working at all.

EDIT : [https://codepen.io/anon/pen/LvdBGb](https://codepen.io/anon/pen/LvdBGb)

---

<div class="post-metadata">

**Author:** ![Skwal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/skwal/32/1212_2.png) [@Skwal](https://phaser.discourse.group/u/Skwal)\
**Post date:** [April 18, 2019, 3:16pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/4 "2019-04-18T15:16:36Z")

</div>

You probably don’t need to post your entired code, just try to find the relevant parts (mostly onArrowClicked and where it’s called).

---

<div class="post-metadata">

**Author:** ![TheHaricover](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@TheHaricover](https://phaser.discourse.group/u/TheHaricover)\
**Post date:** [April 18, 2019, 3:18pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/5 "2019-04-18T15:18:42Z")

</div>

@Skwal You’re right. But I already had the immense slackness to upload my code on codepen and my lazyness is 10 times higher when I think about cutting it but keeping it working.

How do I flag it ?

---

<div class="post-metadata">

**Author:** ![Skwal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/skwal/32/1212_2.png) [@Skwal](https://phaser.discourse.group/u/Skwal)\
**Post date:** [April 18, 2019, 3:24pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/6 "2019-04-18T15:24:53Z")

</div>

No, it’s fine. I was saying that because it’s not always easy (when the project is big and has a lot of files), but in your case it was one file and it’s not that big, so it’s all good. 🙂

---

<div class="post-metadata">

**Author:** ![TheHaricover](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@TheHaricover](https://phaser.discourse.group/u/TheHaricover)\
**Post date:** [April 18, 2019, 3:25pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/7 "2019-04-18T15:25:22Z")

</div>

Okay nice 😛

---

<div class="post-metadata">

**Author:** ![Skwal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/skwal/32/1212_2.png) [@Skwal](https://phaser.discourse.group/u/Skwal)\
**Post date:** [April 18, 2019, 4:12pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/8 "2019-04-18T16:12:23Z")

</div>

The only problem I see is that the event is called `'keydown-ENTER'`. It is case-sensitive, `'keydown-Enter'` won’t work. You shouldn’t have to check for the `type` thought.

Here’s the pen updated [https://codepen.io/anon/pen/EJEeBd](https://codepen.io/anon/pen/EJEeBd) if you want to test.

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [April 18, 2019, 4:20pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/9 "2019-04-18T16:20:43Z")

</div>

Hello @TheHaricover, I’m actually not favoring this way to use functions but here is code’s kinda fixed version…

[https://codepen.io/halilcakar/pen/gyeBOP](https://codepen.io/halilcakar/pen/gyeBOP)

Basicly, i added your `config.scene` object another `extend` object and use these functions as it’s scene’s own functions.

So your config is:

```
var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            //added this
            extend: {
              createArrowNext,
              handleSlide
            }
        }
    };

```

After this inside your `create` function:

```
function create() {
    //....
    this.createArrowNext();
    this.handleSlide();
}

```

I actually didn’t understand at all what you are trying to do, but most certainly you should extend the `Phaser.Scene` and use it’s internal functions maybe check for examples for more info [this one](https://labs.phaser.io/edit.html?src=src%5Cscenes%5Cpause%20and%20resume.js) for instance. It’s from the [labs.phaser.io](http://labs.phaser.io) and would be better with this i guess 🙂

If you need help about refactoring your code into this kind let me know 🙂

---

<div class="post-metadata">

**Author:** ![TheHaricover](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@TheHaricover](https://phaser.discourse.group/u/TheHaricover)\
**Post date:** [April 19, 2019, 7:23am UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/10 "2019-04-19T07:23:29Z")

</div>

@Skwal. I changed ‘keydown-Enter’ to ‘keydown-ENTER’ but still, the key is “seen” by the code, but the function isn’t called.  
I shouldn’t have to check for the type, but unfortunatly I must. Otherwise, the ‘load’ event call the function until the end of the slides and kinda block my script.

---

<div class="post-metadata">

**Author:** ![TheHaricover](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@TheHaricover](https://phaser.discourse.group/u/TheHaricover)\
**Post date:** [April 19, 2019, 7:27am UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/11 "2019-04-19T07:27:09Z")

</div>

Hi @hcakar. Thank you for your help.  
I’m not sure I understand how your fix could help me, but I don’t really understand everything behind phaser.  
I’ve tested your codepen and when I press the “Enter” key, nothing happens. What I was trying to do is to press “Enter” instead of clicking on the arrow to go forward to another slide. Unfortunatly, nothing happens when we press “Enter”, except a console.log which shows us that the key is being “seen” by the code.  
I’ll watch your other links now.

---

<div class="post-metadata">

**Author:** ![TheHaricover](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@TheHaricover](https://phaser.discourse.group/u/TheHaricover)\
**Post date:** [April 19, 2019, 7:31am UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/12 "2019-04-19T07:31:40Z")

</div>

@Skwal Okay, after watching your codepen, I realized that you removed the condition for the type, so I removed it in my code (+ changed “Enter” to “ENTER”) and it’s working just like it should.  
So apparently, it was just a typo. Is that normal that a typo (which is in addition really minor) did a so much weird behavior ?  
Anyway, thank you !

---

<div class="post-metadata">

**Author:** ![Skwal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/skwal/32/1212_2.png) [@Skwal](https://phaser.discourse.group/u/Skwal)\
**Post date:** [April 19, 2019, 3:15pm UTC](https://phaser.discourse.group/t/listener-must-be-a-function-key-down-function-with-arguments/2152/13 "2019-04-19T15:15:51Z")

</div>

Yes @TheHaricover, typos in actual code will generate errors, but typos in strings like this won’t, because they could literally be anything; unless some code validates it of course.  
Basically, the reason why it didn’t complain about `Enter` is that you could have created your own event with that name, and it wouldn’t be an error (just a terrible idea 😃 ).
