Currently, I am in the process of creating a simple web application that involves the use of two JavaScript libraries, dat.gui, and three.js.
One issue that I am encountering is that the drop-down menu appears to be locked and I am unable to access it.
// initialization of gui (dat.gui)
function initGui() {
var Options = function() {
this.tenda = 'bar';
};
config = new Options();
var gui = new dat.GUI();
var subGui = gui.addFolder('Setting');
subGui.open();
// callbacks
subGui.add( config, 'tenda', ['bar', 'pie', 'area']).
onChange(
function() {
if (config.tenda === 'bar') { ... }
else if (config.tenda === 'pie') { ... }
else if (config.tenda === 'area') { ... }
}
);
};
After researching online, it appears that this is a known issue, although I have come across some examples where the drop-down menus are functioning correctly. As I am relatively new to JavaScript, I considered the possibility of a scoping issue and attempted to resolve it by encapsulating the initialization process within a function. Despite this, the problem persists.
I am using Ubuntu/Chrome and Ubuntu/Firefox for development. You can view the complete code here, where I have implemented checkboxes instead of a drop-down menu.