Javascript dat.GUI用户输入不工作

我正在构建一个简单的web应用程序。作为其中的一部分，我想使用dat.GUI，因为它似乎是最简单的方法

我想做的是： 我正在使用three.js显示一个对象。在这个对象上，我需要某种GUI（目前使用的是dat.GUI），它允许用户输入一个搜索词并点击一个按钮，然后调用一个使用该搜索词的函数

到目前为止，我已经创建了一个名为search term的变量，并将其添加到GUI中。这可以正常工作，并显示变量的值。GUI还能够侦听变量，并在变量更改后进行更新。但我无法修改该值。我还添加了一个字段来调整我在three.js中添加到szene的灯光的强度。对于GUI的这一部分，通过拖动条来调整值是可行的，但尝试输入值却不行

代码如下所示：

var searchterm = '';
...

function init(){
....
var gui = new dat.GUI();
gui.add(light, 'intensity').min(1).max(10).listen();
gui.add(this, 'searchterm').listen();

}

---

如果您能提供有关我为什么不能编辑其他易于使用的GUI的值或建议的任何帮助，我们将不胜感激。

z顺序可能会出错？我找不到比dat gui更容易使用的东西了

.main {
   z-index: 5;
}

---

确保这个元素在前面。除此之外，我确定问题可能是什么。

不确定这是否有帮助，但这就是我遇到的问题。如果您的three.js画布上有任何类型的相机控件，这可能会干扰GUI。例如，您可以调整滑块，但不能编辑文本。将控件附加到three.js相机时，例如，

new three.js控件（相机），请确保将three.js dom元素指定为第二个参数，如下所示：

new-THREE.OrbitControls（摄像头、文档、getElementById（'threeCanvas'）
我有一些问题

它来自“.listen（）”函数。
是马车

删除.listen（），它就会工作。
我也遇到过同样的问题。在我的例子中，它是由以下CSS引起的：

span {
    margin: 0 10px;
}

将样式应用于新创建的类而不是
span
解决了它。
在我的例子中，这是一个z索引问题。我用以下方法修复了此问题：

.dg.ac {
  z-index: 1000 !important;
}

对于将dat.gui与three.js一起使用的示例，请查看这些示例是否存在相同的问题。哇，我不知道为什么会解决这个问题，但这就是解决方案。非常感谢。我也看到了同样的问题。是否有解决此问题的DAT GUI版本？这里的问题相同，但我没有使用
.listen（）
：（这有助于解决orbit控件和dat.gui可能出现的大多数问题，但我认为它并不能解决问题。不过这是一个很好的建议。我使用的是裸体网络，这解决了我的问题，谢谢！z-index需要为0，因为当ThreeJS窗口位于z-index 1时，dat.gui被覆盖了……所以这个答案帮助我理解了这一点。）outI使用的是裸体web，这解决了我的问题，谢谢！z-index需要为0，因为当ThreeJS窗口位于z-index 1时，dat.gui被覆盖