# Using createA() with a '#' instead of a url loads the current page in the web editor

**URL:** <https://discourse.processing.org/t/using-createa-with-a-instead-of-a-url-loads-the-current-page-in-the-web-editor/19864>\
**Category:** Beginners\
**Created:** [April 17, 2020, 11:05am UTC](https://discourse.processing.org/t/using-createa-with-a-instead-of-a-url-loads-the-current-page-in-the-web-editor/19864 "2020-04-17T11:05:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vera](https://avatars.discourse-cdn.com/v4/letter/v/b3f665/32.png) [@Vera](https://discourse.processing.org/u/Vera)\
**Post date:** [April 17, 2020, 11:05am UTC](https://discourse.processing.org/t/using-createa-with-a-instead-of-a-url-loads-the-current-page-in-the-web-editor/19864/1 "2020-04-17T11:05:07Z")

</div>

I’m currently following the tutorials from The Coding Train on p5.js and I’ve run into a problem with the createA() DOM element. They are a bit older and I’m not sure if this is a bug or something I’m doing wrong…

In videos 8.13 and [8.14](https://www.youtube.com/watch?v=4OAG_BkQcPE&list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX&index=14) Dan use ‘#’ instead of a url, like this:

```auto
var a = createA('#', 'apples');
a.mousePressed(addPhoto);

function addPhoto() {
  var img = createImg('apples2.jpg', 'apples');
  img.size(100, 100);
}

```

In the video nothing happens with a mouseclick except the function addPhoto, which loads an image of an apple. When I click, the current page (the p5.js editor) is loaded in the preview window. I can even run the code again in this version and the same happens again.

 ![p5js problem](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/50d9cd77c7ea3093f691a83034c09fdc720f7dd2.jpeg)

Sometimes it happens the first time I click and sometimes only the second time. Earlier I occasionally also saw the p5.js 404 error page, but for some reason I can’t reproduce this anymore.

[This](https://editor.p5js.org/VeraJunior/sketches/HvYyh3Os) is the sketch in the editor.

I hope someone can help me figure out what I’m doing wrong or point out another way to do it. It’s not really the most important part of the tutorials, but it’s really frustrating when I’m trying different things and every time I can hardly see what occurred before this happens again.  
Thanks,  
Vera

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [April 17, 2020, 4:30pm UTC](https://discourse.processing.org/t/using-createa-with-a-instead-of-a-url-loads-the-current-page-in-the-web-editor/19864/2 "2020-04-17T16:30:19Z")

</div>

Welcome! Your code would normally run just fine, but you’ll have to tweak it a little to work with the p5 Editor.

TL;DR Try changing

```javascript
var a = createA('#', 'apples');

```

to

```javascript
var a = createA('about:srcdoc#', 'apples');

```

The longer story: the p5 Editor runs your sketch in an [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), which is a way to embed webpages within other webpages. This is a really nice thing in general, but complicates using that `#` (an [in-page link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page)). The team is working on it [here](https://github.com/processing/p5.js-web-editor/issues/145). 👍🏼

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 17, 2020, 7:34pm UTC](https://discourse.processing.org/t/using-createa-with-a-instead-of-a-url-loads-the-current-page-in-the-web-editor/19864/3 "2020-04-17T19:34:09Z")

</div>

> [@mcintyre](#):
>
> The longer story: the p5 Editor runs your sketch in an [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),

More on the p5js web editor & [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) stuff:

> [@My enemy "Script error. (:line 0)"](https://discourse.processing.org/t/my-enemy-script-error-line-0/19372/2):
>
> B/c I don’t use the p5js online editor I don’t! I can’t say for sure either. What I do know is that most JS online hosts run our code inside an [\<iframe\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), which by itself gets a little in the way when we need to debug it. But by itself an [\<iframe\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) shouldn’t interfere that much. It would only make it harder to directly access global variables and that’s it. My guess is that the p5js online editor goes further than that, w/ “features” like console logs redirection, “friendly” custom error me…

---

<div class="post-metadata">

**Author:** ![Vera](https://avatars.discourse-cdn.com/v4/letter/v/b3f665/32.png) [@Vera](https://discourse.processing.org/u/Vera)\
**Post date:** [April 17, 2020, 7:50pm UTC](https://discourse.processing.org/t/using-createa-with-a-instead-of-a-url-loads-the-current-page-in-the-web-editor/19864/4 "2020-04-17T19:50:41Z")

</div>

Thank you, this works perfectly!  
I actually searched this topic on Github, but couldn’t find it there. I guess I didn’t use the right keywords…