CODEWITHSUNDEEP
javascripthtml5-canvasp5.js
simplexshotz
simplexshotz

Reputation: 309

p5.js Canvas doesn't show anything when an input element is added through JavaScript

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.

Upvotes: 1

Views: 539

Answers (1)

Chen Ni
Chen Ni

Reputation: 1164

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.

Upvotes: 2

Related Questions