Weird / unexpected behavior with this.registry.set()

Phaser 3
1

Not a JS expert, but this really doesn’t make sense to me at all, in a UI scene (which is launched from my main scene), I have the following:

export default class UI extends Phaser.Scene {
  constructor() {
    super({
      key: "ui",
    });
  }

  preload() {
    this.load.html("nameform", "intro.html");
  }

  create(data) {
    const element = this.add.dom(200, 100).createFromCache("nameform");
    element.addListener("click");
    element.on("click", function (event) {
      if (event.target.name === "playButton") {
        const inputText = this.getChildByName("nameField");
        if (inputText.value !== "") {
          this.removeListener("click");
          this.setVisible(false);
          this.scene.registry.set("pat", inputText.value)
        }
      }
    });

    this.registry.set("pat", "boop") // <--- THIS LINE
}

Then in my main scene I have:

...
this.registry.events.on("changedata", this.updateData, this);
updateData(parent, key, data) {
    if (key === "pat") {
      console.log(data);
    }
  }
...

When I type in the text field (nameField) and hit the button, it logs out what I type, but if I delete the line marked THIS LINE , it doesn’t (logs nothing). I have no idea why that line should have any bearing on what’s happening? It’s not printing “boo”, it’s printing the contents of the text field? But omitting that line means it prints nothing?

I’m very confused. Something about the state in the closure?

2

SET_DATA means the item was created. CHANGE_DATA means an existing item’s value was set. So you probably want to do

this.registry.set("pat", "")

first.

3

Nailed it, perfect thank you!