Get a text value for DOM and display in dat.gui field

Question

I have a dat.gui to control a three.js scene. I want it to display a text value from the DOM

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

I can't see a way to get this to work. Could you please help me out? Thank you very much

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

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

score 2 · Accepted Answer · answered Jul 22 '19 at 05:53

2

Instead of:

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

Use:

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

answered Jul 22 '19 at 05:53

Almog Gabay

Thanks so much! Do you know how can i get it to update when the DOM element changes? – root Jul 22 '19 at 06:11
1

Add the "onchange" event listener to the div: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange – Almog Gabay Jul 22 '19 at 06:17
I've refered your link but I can't figure out how to address the element inside dat.gui could you please help me out? I can't ask another question for 90 mins. – root Jul 22 '19 at 06:34
How can i directly address da.gui 'message' field like this? `let log = document.getElementById('log');` – root Jul 22 '19 at 06:35
1

I understand your question now, but unfortunately I'm not familiar with the dat.gui library. – Almog Gabay Jul 22 '19 at 06:41

score 1 · Answer 2 · answered Jul 22 '19 at 06:14

You can also use querySelector to fetch the data from any html element. MDN documentation says querySelector is prefer.

Benefits:

How to use:

document.querySelector("#data").innerText

2 Answers2