How transform a value into a html element in p5?

p5.js Coding Questions
1

Hi! I’m trying to make a single web page with p5.js, but at some moment I create an input and the value of the input I want to transform into a html tag (more specifically ‘h3’). I already tried the “.html()” as this example: [examples | p5.js], but for some reason this doesn’t work in my context. I’ll let my code below:

let inputName, bttName, yourName;

function setup() {
let inputDiv = createDiv();
  inputDiv.id("input-section");
  inputDiv.parent("sobre");

  inputName = createInput();
  inputName.addClass("input-name");
  inputName.parent("input-section");

  bttName = createButton('enter');
  bttName.addClass('btt-name');
  bttName.parent("input-section");
  bttName.mousePressed(sendName);

}

function sendName() {
  let userName = inputName.value();
  yourName.html(userName);
}

I need this in as a variable, because after I’ll format it inside a div in css. Is there another way to transform this value?

Thanks

2
1 Like
3

Doesn’t work too. :slightly_frowning_face:

function sendName() {
  let userName = inputName.value();
  yourName.createElement('h3', userName);
}

Error:

TypeError: Cannot read properties of undefined (reading ‘createElement’)

I really don’t understand why both get errors, if even I used before at the same code…

4

If you get that error it means you’re probably using a var which still doesn’t have a value assigned to it.

Besides, createElement() is a method from class p5, which represents the sketch itself.

So you just invoke it directly just like you did w/ createDiv(), createInput() & createButton().

1 Like
5

I get it!!! Thankssss