我试图用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中格式化它。有没有别的方法来转换这个值?
感谢如果我理解正确，您想要输出输入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>