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

p5.js Beginners
#1

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 Dan use ‘#’ instead of a url, like this:

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
p5js problem1920×937 158 KB

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 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

2 Likes
#2

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

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

to

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

The longer story: the p5 Editor runs your sketch in an 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). The team is working on it here. :+1:t3:

4 Likes
#3

More on the p5js web editor & iframe stuff:

#4

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…