Creating DOMElement for Textfield Input

Phaser 3
1

Hi everybody,

i want to create a DOMElement for a textfield where the player can enter their names in highscore.
I’m using this example: https://labs.phaser.io/edit.html?src=src\game%20objects\dom%20element\input%20test.js
But when i add the lines to my code literally nothing happens.

Here is my code:

//change the string of localStorageName to reset highscore
var localStorageName = "empty";
var highScore;

let pointer;

class Highscore extends Phaser.Scene {
	
	constructor() {
	
		super("Highscore");
		
	}
		
	init(data){
		//get score from Level.js
		this.score = data.score;
		this.time = data.time;
		
		//checks if any highscore is saved, otherwise highscore = 0
		highScore = localStorage.getItem(localStorageName) == null ? 0 :
            localStorage.getItem(localStorageName);
	}
	
	create() {
		
		//add background
		/*let bg = this.add.image(0,0,"highscore", "background_scenes").setOrigin(0,0).setScale(1.05);
		
		//if score is higher than highscore, uodate highscore
		highScore = Math.max(this.score, highScore);
    	localStorage.setItem(localStorageName, highScore);
		
		var duration = Phaser.Math.RoundTo(this.time/60000, -1);
		console.log(duration);

		//add texts 
		let game_over = this.add.text(200, 100, "Gratulation! \nDu hast " + this.score + " Punkte\n in " + duration + " Minuten erreicht!\n Beste Punktzahl: " + highScore, 
		{fontSize: "32px", fontFamily: "Consolas", fill: "#ffffff", align: "center"});
		
		let replay = this.add.text(100, 400, "Drücke die Leertaste um nocheinmal zu spielen!", 
		{fontSize: "24px", fontFamily: "Consolas", fill: "#ffffff", align: "center"});
		
		pointer = this.input.activePointer;*/
		
		let form = `<input type="text" name="nameField" placeholder="Enter your name" style="font-size: 32px">
		<input type="button" name="playButton" value="Let's Play" style="font-size: 32px">`;
		
		let element = this.add.dom().createFromHTML(form);

	    element.addListener('click');
	
	    element.on('click', function (event) {
	
	        if (event.target.name === 'playButton')
	        {
	            var inputText = this.getChildByName('nameField');
	
	            //  Have they entered anything?
	            if (inputText.value !== '')
	            {
	                //  Turn off the click events
	                this.removeListener('click');
	
	                //  Hide the login element
	                this.setVisible(false);
	
	                //  Populate the text with whatever they typed in
	                text.setText('Welcome ' + inputText.value);
	            }
			}
		});
		
		console.log(element);
	}
	
	update(){
		/*//restart at Scene ChooseChar.js if SPACE is pressed
		this.input.keyboard.once("keydown-" + "SPACE", () => {
			score = 0;
			this.scene.start("ChooseChar");	
		});
		
		if(pointer.isDown){
			score = 0;
			this.scene.start("ChooseChar");
		}*/
	}
 }

I uncommented my recent code to check if i can see the element then, but it’s still not working.
My console shows:

   DOMElement {_events: Events, _eventsCount: 1, scene: Highscore, type: "DOMElement", state: 0, …}
active: true
alpha: 1
angle: 0
blendMode: 0
body: null
cache: BaseCache {entries: Map, events: EventEmitter}
cameraFilter: 0
data: null
depth: 0
displayHeight: 0
displayOriginX: 0
displayOriginY: 0
displayWidth: 0
handler: ƒ ()
height: 0
ignoreDestroy: false
input: null
name: ""
node: div
parent: null
parentContainer: null
perspective: [Exception: TypeError: Cannot read property 'style' of null at DOMElement.get [as perspective] (http://localhost:1982/projects/infoteam-Universe/WebContent/lib/phaser.js:85433:43) at DOMElement.invokeGetter (<anonymous>:1:142)]
renderFlags: 15
rotate3d: Vector4 {x: 0, y: 0, z: 0, w: 0}
rotate3dAngle: "deg"
rotation: 0
scale: 1
scaleX: 1
scaleY: 1
scene: Highscore {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …}
skewX: 0
skewY: 0
state: 0
tabIndex: -1
transformOnly: false
type: "DOMElement"
visible: true
w: 0
width: 0
x: 0
y: 0
z: 0
_events: Events {click: EE}
_eventsCount: 1
_visible: true
__proto__: GameObject

But i can’t see anything?

Thank you!

2

Make sure you have { dom: { createContainer: true } } in game config.