如何将值转换为 p5.js 中的 html 元素？答案

【问题标题】：How transform a value into a html element in p5.js?如何将值转换为 p5.js 中的 html 元素？
【发布时间】：2021-10-24 22:48:11
【问题描述】：

我正在尝试使用 p5.js 创建一个网页，但有时我创建了一个输入，并且我想将输入的值转换为一个 html 标签（更具体地说是“h3”）。我已经尝试了“.html()”作为这个例子： [examples | p5.js]，但由于某种原因，这在我的上下文中不起作用。我将让我的代码如下：

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);
}

我需要它作为一个变量，因为之后我会在 css 中的 div 中对其进行格式化。还有其他方法可以转换此值吗？

谢谢

【问题讨论】：

你试过yourName.html(createElement('h3', userName.value()));吗？

标签： javascript html web processing p5.js

【解决方案1】：

如果我理解正确，您想输出输入到 h3 元素中的名称？

在这种情况下，您可以使用：

yourName = createElement('h3', userName);

就像他们在您链接的参考文献中所做的那样。

这是一个运行示例：

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>

【讨论】：