CODEWITHSUNDEEP
javascripthtmldat.gui
root
root

Reputation: 177

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

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')

Upvotes: 0

Views: 1191

Answers (2)

Mr Khan
Mr Khan

Reputation: 2292

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

Benefits:

  • QuerySelector is the newer feature.

  • QuerySelector is better supported than getElementsByClassName.

How to use: 

document.querySelector("#data").innerText

Upvotes: 1

Almog Gabay
Almog Gabay

Reputation: 135

Instead of:

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

Use:

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

Upvotes: 2

Related Questions