Estoy tratando de hacer una sola página web con p5.js, pero en algún momento creo una entrada y el valor de la entrada que quiero transformar en una etiqueta html (más específicamente 'h3'). Ya probé el “.html()” como este ejemplo: [examples | p5.js] , pero por alguna razón esto no funciona en mi contexto. Dejaré mi código a continuación:
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); }Necesito esto como una variable, porque después lo formatearé dentro de un div en css. ¿Hay otra forma de transformar este valor?
Gracias
Si entiendo correctamente, ¿quiere generar el nombre que se ingresó en un elemento h3 ?
En ese caso, podrías simplemente usar:
yourName = createElement('h3', userName);como lo han hecho en esa referencia que vinculaste.
Aquí hay un ejemplo en ejecución:
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>