获取 DOM 的文本值并显示在 dat.gui 字段中

Question

我有一个dat.gui来控制一个three.js场景。我希望它显示来自 DOM

的文本值

 <div id="data">data</div>

我看不出有什么方法可以让它发挥作用。你能帮帮我吗？ 非常感谢

var guiControls = new function() {
    this.message = document.getElementById('data');

var gui = new dat.GUI();
    gui.add(guiControls, 'message')

Answer 1

而不是：

this.message = document.getElementById('data').value;

使用：

this.message = document.getElementById('distance').textContent;

Answer 2

您还可以使用 querySelector 从任何 html 元素中获取数据。 MDN 文档说 querySelector 更受欢迎。

好处：

• QuerySelector 是较新的功能。

• QuerySelector 比 getElementsByClassName 得到更好的支持。

使用方法：

document.querySelector("#data").innerText