Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

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

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>

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.