# Adding onClick to DOM Element

**URL:** <https://phaser.discourse.group/t/adding-onclick-to-dom-element/4414>\
**Category:** Phaser 3\
**Created:** [November 29, 2019, 5:08pm UTC](https://phaser.discourse.group/t/adding-onclick-to-dom-element/4414 "2019-11-29T17:08:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![WarHatch](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/warhatch/32/2589_2.png) [@WarHatch](https://phaser.discourse.group/u/WarHatch)\
**Post date:** [November 29, 2019, 5:08pm UTC](https://phaser.discourse.group/t/adding-onclick-to-dom-element/4414/1 "2019-11-29T17:08:09Z")

</div>

Hey I’m trying to add a function to a DOM element that I have placed to a scene, but it doesn’t seem like the created element allows me to do that: "property _onClick_ does not exist on ‘domElement’:

```
const domElement = this.add.dom(420, 60).createFromHTML(someHTML);
domElement.setInteractive();
domElement.on('pointerdown', domElement.onClick(this.meteorGameData.gameElements[0].onClick));

```

What would be the best way to add onClick functionality to DOM Elements in a phaser scene?

---

<div class="post-metadata">

**Author:** ![WarHatch](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/warhatch/32/2589_2.png) [@WarHatch](https://phaser.discourse.group/u/WarHatch)\
**Post date:** [November 29, 2019, 7:25pm UTC](https://phaser.discourse.group/t/adding-onclick-to-dom-element/4414/2 "2019-11-29T19:25:41Z")

</div>

If anyone is interested this is how I solved it:

```
const pulledHTML = this.meteorGameData.gameElements[0].html;
const pulledClickFunc = this.meteorGameData.gameElements[0].onClick;
const domElement = this.add.dom(420, 60).createFromHTML(pulledHTML);
domElement.addListener('click');
domElement.on('click', pulledClickFunc);
```

---

<div class="post-metadata">

**Author:** ![peterdfinn](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@peterdfinn](https://phaser.discourse.group/u/peterdfinn)\
**Post date:** [January 6, 2020, 11:09pm UTC](https://phaser.discourse.group/t/adding-onclick-to-dom-element/4414/3 "2020-01-06T23:09:39Z")

</div>

I tried creating a simple rectangle that was the size of my game window, and I added the ‘click’ listener, but I had no luck. When I clicked the created rectangle, the only thing that happened was in the scene: if I clicked on a button in my scene, the button did what it was supposed to do, as if the DOM rectangle wasn’t even triggering an input event at all. Any idea why this might be?  
(Please forgive the formatting; I didn’t know how to put my code in a gray box like yours; how did you do that, by the way?)  
const dom : Phaser.GameObjects.DOMElement = this.add.dom(600, 675/2, “div”, “background-color: black; width: 1200px; height: 675px; font: 48px Arial”);  
dom.addListener(“click”);  
dom.setInteractive();  
dom.alpha = 0.2;  
dom.on(“click”, function()  
{  
console.log(“dom clicked”);  
});

---

<div class="post-metadata">

**Author:** ![WarHatch](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/warhatch/32/2589_2.png) [@WarHatch](https://phaser.discourse.group/u/WarHatch)\
**Post date:** [January 6, 2020, 11:32pm UTC](https://phaser.discourse.group/t/adding-onclick-to-dom-element/4414/4 "2020-01-06T23:32:37Z")

</div>

Here’s how to do the cool code formatting: [https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting)

I’m not 100% sure, but I think there’s no way to prevent you from clicking things in your scene by having a DOM element on top

Also if I had to guess you might need to call `dom.setInteractive();` before you call `dom.addListener(“click”);`