# Phaser 3 interacts with DOM Elements?

**URL:** <https://phaser.discourse.group/t/phaser-3-interacts-with-dom-elements/6462>\
**Category:** Phaser 3\
**Created:** [May 27, 2020, 2:16pm UTC](https://phaser.discourse.group/t/phaser-3-interacts-with-dom-elements/6462 "2020-05-27T14:16:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![RaynhardMK](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/raynhardmk/32/3455_2.png) [@RaynhardMK](https://phaser.discourse.group/u/RaynhardMK)\
**Post date:** [May 27, 2020, 2:16pm UTC](https://phaser.discourse.group/t/phaser-3-interacts-with-dom-elements/6462/1 "2020-05-27T14:16:48Z")

</div>

Hello, there! I’m new here, and so forgive me if I post this in a wrong place. Anyway, my simple questions:

> Can Phaser 3 interact with HTML elements outside the game, such as div, p, h1, etc.?  
> If it can, how can I do that? Is there an example for that?

For example, I wrote my game’s title inside a div, above the game’s canvas. In the middle of the game, I want to change the title. Can I do that?  
Thank you!

* * *

* * *

I have to say, this community is very supportive and kind. Respect for those who are kindly answer this type of “dumb” questions. 😃 . I hope samme answer see this post 😆

---

<div class="post-metadata">

**Author:** ![PBMCube](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/pbmcube/32/93_2.png) [@PBMCube](https://phaser.discourse.group/u/PBMCube)\
**Post date:** [May 27, 2020, 4:04pm UTC](https://phaser.discourse.group/t/phaser-3-interacts-with-dom-elements/6462/2 "2020-05-27T16:04:06Z")

</div>

These might help, and the answer is “yes” and make sure you’re using v3.17+:  
[https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.DOMElement.html](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.DOMElement.html)  
[https://rexrainbow.github.io/phaser3-rex-notes/docs/site/domelement/](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/domelement/) **(my favorite reference site! with examples)**  
[https://phaser.io/examples/v3/category/game-objects/dom-element](https://phaser.io/examples/v3/category/game-objects/dom-element)  
[https://phasergames.com/phaser-3-input-text-form-ui-part-1/](https://phasergames.com/phaser-3-input-text-form-ui-part-1/) **(from one of my favorite authors!)**

and make sure you’re using v3.17+ (see [devLog here](https://phaser.io/news/2019/05/phaser-3170-released))

Advice from other forum members about [DOM elements here](https://phaser.discourse.group/t/adding-html-elements/278/5) and [another (very important) clue here](https://phaser.discourse.group/t/dom-element/1523/2)

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [May 27, 2020, 5:07pm UTC](https://phaser.discourse.group/t/phaser-3-interacts-with-dom-elements/6462/3 "2020-05-27T17:07:06Z")

</div>

If your game’s title is in a div that wasn’t created through Phaser DOM elements, the answer is still yes. You are just writing JavaScript that’s running on a webpage.

You can get a reference to that DOM element via [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and then change it’s [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) value.

Something like:

```javascript
document.querySelector('#gameTitle').textContent = 'new game title';

```

---

<div class="post-metadata">

**Author:** ![RaynhardMK](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/raynhardmk/32/3455_2.png) [@RaynhardMK](https://phaser.discourse.group/u/RaynhardMK)\
**Post date:** [May 27, 2020, 6:05pm UTC](https://phaser.discourse.group/t/phaser-3-interacts-with-dom-elements/6462/4 "2020-05-27T18:05:39Z")

</div>

Thank you! I’ll check it out today, after I finish my classes. I might be back for more questions if later I get confused. I’m super excited with this engine 😆

---

<div class="post-metadata">

**Author:** ![RaynhardMK](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/raynhardmk/32/3455_2.png) [@RaynhardMK](https://phaser.discourse.group/u/RaynhardMK)\
**Post date:** [May 27, 2020, 6:06pm UTC](https://phaser.discourse.group/t/phaser-3-interacts-with-dom-elements/6462/5 "2020-05-27T18:06:56Z")

</div>

Thanks for the reply!! I’ll try it out 😁