Question

0

110

Views

How transform a value into a html element in p5.js?

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T04:48:52.985Z

If I'm understanding correctly, you're wanting to output the name that's entered into a h3 element?

In that case you could just use:

yourName = createElement('h3', userName);

like they've done in that reference you linked.

Here's a running example:

let inputName, bttName, yourName;

function setup() {
  let inputDiv = createDiv();
  inputDiv.id("input-section");
  
  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 = createElement('h3', userName);
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>