# How could I have acces to DOM elements p5.js

**URL:** <https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852>\
**Category:** Beginners\
**Created:** [June 22, 2021, 1:59pm UTC](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852 "2021-06-22T13:59:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [June 22, 2021, 1:59pm UTC](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852/1 "2021-06-22T13:59:14Z")

</div>

Hi community,  
I’ve watched [Handling DOM Events with Callbacks](https://www.youtube.com/watch?v=NcCEzzd9BGE&list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX&index=4) of Coding Train.  
In this vidéo, Daniel Shiffman created a `button` element in` sketch.js` , using a mousePressed() function to control the randomness of background color.  
Instead of creating a dom element in `sketch.js`, i’d like to link the function to a preexisting element in the `index.html`. Il dosen’t work as expected, I kept getting the warning message `button.mousePressed is not a function`. Can anyone help me ? Many thanks!  
[link to editor p5.js](https://editor.p5js.org/WaningJupiter/sketches/7AbDzTgA6)

index.html

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <button id="click"><p>I am the dysfunctional button </p></button>
    <script src="sketch.js"></script>
  </body>
</html>

```

sketch.js

```auto
let bgc;
let button =document.getElementById('click');

const t =(sketch)=> {
  sketch.setup=()=>{
    sketch.createCanvas(400, 400);
    bgc = sketch.color(30);
    button.mousePressed(sketch.changebgc);
  };
  
  sketch.changebgc=()=>{
      bgc = sketch.color(sketch.random(0,225));
  };
  sketch.draw=()=>{
    sketch.background(bgc);
    sketch.fill(220);
  };
};

let bg = new p5(t);

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [June 22, 2021, 3:16pm UTC](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852/2 "2021-06-22T15:16:02Z")

</div>

try something like

```auto
let bgc;
let button = document.getElementById("click");

const t =(sketch)=> {
  sketch.setup=()=>{
    sketch.createCanvas(400, 400);
    bgc = sketch.color(30);
    //button.mousePressed(sketch.changebgc);
    button.onclick = sketch.changebgc;
  }
  
  sketch.changebgc=()=>{
      bgc = sketch.color(sketch.random(0,225));
  }
  sketch.draw=()=>{
    sketch.background(bgc);
    sketch.fill(220);
  }
  
}

let bg = new p5(t);

```

no doubt there are a few ways to do this

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [June 22, 2021, 3:46pm UTC](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852/3 "2021-06-22T15:46:52Z")

</div>

Yes, it worked. Thanks a lot. But i don’t quite get why `mousePressed` gonna work when create a dom button in` sketch.js`, but not in my case ?

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [June 22, 2021, 4:03pm UTC](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852/4 "2021-06-22T16:03:52Z")

</div>

i think if you mean if you create a button like this

```auto
let button = createButton('mybutt');
button.mousePressed(isbig);

```

why does the mousePressed work and I think it is because this isn’t a standard dom or html button rather it’s a p5js specific implementation of a button. when you use document.get… you are accessing the actual dom and getting a traditional html button. basically depending on what you are using/accessing you will have to refer to the appropriate documentation.

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [June 22, 2021, 4:50pm UTC](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852/5 "2021-06-22T16:50:24Z")

</div>

yeah, when i said "create a button in `sketch.js` " is like what you demonstrated in the comment, sorry, i was’nt very clear, And thanks again for the enlightenment.