# Using dom class to create html overlay

**URL:** <https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923>\
**Category:** Phaser 3\
**Created:** [June 26, 2022, 1:58pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923 "2022-06-26T13:58:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![CJSolo](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@CJSolo](https://phaser.discourse.group/u/CJSolo)\
**Post date:** [June 26, 2022, 1:58pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/1 "2022-06-26T13:58:18Z")

</div>

Hello everyone,

Me and two of my classmates are working on a game project. We are attempting to use the dom class to add the html overlay, but nothing we have done seems to work. Whether its a form or just a string of test, it doesn’t display. We have gone through the API documentation, the phaser examples on github and have found other posts here and on stack overflow with no luck. We’ve been spinning our wheels on this for the last week so we would be greatly appreciative of any assistance.

All three of us are using Chrome browser. I have been working locally with XAMPP. Below is my most recent attempt where I was trying a different approach by using the div tutorial located at [Phaser - Examples - Div Depth](https://phaser.io/examples/v3/view/game-objects/dom-element/div-depth)

```javascript
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Fractured Worlds</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'divId',
    dom: {
        createContainer: true
    },
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
this.load.image('title', 'assets/Title1.png');
}

function create ()
{
this.add.image(200, 100, 'title');

    var div1 = document.createElement('div');
    div1.style = 'background-color: lime; width: 220px; height: 100px; font: 48px Arial; font-weight: bold';
    div1.innerText = 'Phaser 3';

    var div2 = document.createElement('div');
    div2.style = 'background-color: yellow; width: 220px; height: 100px; font: 48px Arial; font-weight: bold';
    div2.innerText = 'Phaser 3';

    var element1 = this.add.dom(300, 0, div1);
    var element2 = this.add.dom(400, 0, div2);

    element1.setDepth(2);

}
</script>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 26, 2022, 2:11pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/2 "2022-06-26T14:11:20Z")

</div>

👋

Make sure game config has

```
{ dom: { createContainer: true } }

```

---

<div class="post-metadata">

**Author:** ![CJSolo](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@CJSolo](https://phaser.discourse.group/u/CJSolo)\
**Post date:** [June 27, 2022, 3:18am UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/3 "2022-06-27T03:18:20Z")

</div>

Thank you, Sam. It’s not showing my full code that I had included. So, I don’t know if you saw it. inside var config{} I have parent: divID, then next line is dom: {createContainer: true}, then config is passed into new phaser.game(). Is that incorrect?

Again, thank you for your time.

---

<div class="post-metadata">

**Author:** ![MelodyConnor](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/melodyconnor/32/6701_2.png) [@MelodyConnor](https://phaser.discourse.group/u/MelodyConnor)\
**Post date:** [June 27, 2022, 2:58pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/4 "2022-06-27T14:58:01Z")

</div>

hey CJ,  
the ‘parent’ is the HTML element where the phaser canvas will be rendered to. i usually have one in my html like that:

```javascript
<div id="phaser-game"></div>

```

and then in the config it needs to be:

```javascript
parent: 'phaser-game'

```

try uploading your code somewhere so we can see what might go wrong

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 27, 2022, 3:07pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/5 "2022-06-27T15:07:14Z")

</div>

Change the Phaser script to [https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js](https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js).

There’s no DOM game object before v3.17.0.

---

<div class="post-metadata">

**Author:** ![CJSolo](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@CJSolo](https://phaser.discourse.group/u/CJSolo)\
**Post date:** [June 27, 2022, 5:50pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/6 "2022-06-27T17:50:38Z")

</div>

I did the script change, but nothing displays still. I uploaded a page, just trying to get the example to work off of the API documentation. The link is: [http://rfdisplay.com/phasergame/phasertest.html](http://rfdisplay.com/phasergame/phasertest.html)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 27, 2022, 6:32pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/7 "2022-06-27T18:32:57Z")

</div>

Open the browser dev tools console and look for errors.

There’s an extra `.` in the script URL, remove it.

Change `createContainer = true` to `createContainer: true`.

---

<div class="post-metadata">

**Author:** ![CJSolo](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@CJSolo](https://phaser.discourse.group/u/CJSolo)\
**Post date:** [June 27, 2022, 6:58pm UTC](https://phaser.discourse.group/t/using-dom-class-to-create-html-overlay/11923/8 "2022-06-27T18:58:09Z")

</div>

It is now working, thank you. Such beginner oversights.