如何从 p5.js 更改 HTML 元素中的文本？

Question

我只是在尝试 p5.js。我想从 p5 更改一些 HTML 文本（不在 p5 画布上）。比如：

score_display = createElement("text", "Score: 0");
...
score_display.nodeValue = "Score: " + score; // doesn't work

我该怎么做？ 谢谢。

Answer 1

p5.js中有一个

.html()

属性可以改变元素的innerHTML。

不可否认，在他们的参考文档中很难找到。也许他们正在贬低？ https://p5js.org/reference/#/p5.Element/html

Answer 2

我认为你只需要做

score_display.value("")

。然后你可以将score_display更改为你想要的任何值，并将括号中的空格更改为你想要的值。

Answer 3

进入index.html并输入以下代码：

<h1>Score : <p id = "scoreText">0</p></h1>

将其放入 html 后，将此代码添加到 sketch.js 中：

function changeText(text){
  document.getElementById("scoreText").innerHTML = text;
}

调用此函数并将分数添加到 parinthisis 中以更改文本

Answer 4

这已经很旧了，但我想我应该告诉你我会怎么做。

创建按钮后，设置其 id：

score_display.id('scoreText');

然后使用 querySelector 或 getElementById 来获取它，就像通常在普通 JavaScript 中一样，并使用 textContent 设置文本。

score_display_element = document.querySelector('#scoreText');
score_display_element.textContent = "Score: " + score;

Answer 5

let score = 0;
function setup() {
  noCanvas();
  scorecard = createP("Your score is " + score);
  scorecard.style("background-color", "white");
}

function draw() {
  score++;
  scorecard.html("Your score is " +score)
}

工作示例

Answer 6

小心

.html()

，它可能导致跨站点脚本（XSS）攻击。仅当您实际设置 HTML 字符串并确定它已被清理时，才使用

html()

才有意义。

更安全的是使用

.elt

检索本机 HTML 元素，然后对其

.textContent

进行赋值以更改文本。

function setup() {
  noCanvas();
  const h2 = createElement("h2", "type into the input");
  const inp = createElement("input");
  inp.input(() => {
    h2.elt.textContent = inp.value();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

p5 的 API 中没有

.text()

getter/setter（在撰写本文时），这太糟糕了。