1

For a bit of background, here's a super simplified version of the problem:

function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    document.body.innerHTML += "<input>";
}

function draw() {
    background(255, 0, 0);
}

What this should do is create a canvas (which it does), add an input to the body (which it does) and then make the canvas' background red (this is where nothing happens).

It seems that any code that is a part of p5 refuses to work (I've tried putting background(255, 0, 0); in setup as well, but that didn't work either). This includes things like line and rect.

What's going on here to cause the issue? Is there a way to fix this without having to use appendChild (which I have not tried as, although it might be the proper way to add elements, this project isn't huge and using innerHTML += is way more convenient)?

Any and all help is appreciated.

simplexshotz
  • 139
  • 12
  • In p5.js you need to use the DOM library. Please take a look at this youtube: [Interacting with the DOM using Sliders, Buttons and Text Inputs - p5.js Tutorial](https://www.youtube.com/watch?v=587qclhguQg) – enxaneta Jul 02 '19 at 13:48
  • I'd try it that way, but I know you don't need to use the DOM library. See one of my other projects: https://simplexshotz.github.io/piupiu.io and the code behind it: https://simplexshotz.github.io/piupiu.io/javascript.js – simplexshotz Jul 02 '19 at 21:36

1 Answers1

1

The problem is that you forgot to add the close tag. Try to change that line to:

document.body.innerHTML += "<input></input>";

And it should work.

Chen Ni
  • 979
  • 1
  • 12
  • 24