Manipulating the checkbox in dat.gui by toggling its checked state

I have a checkbox called autorotation that I would like to set to false when the user clicks anywhere in the scene...

controller = new function() {  
    this.autorotation=true;
}
var gui = new dat.GUI();
f1 = gui.addFolder('Sphere');
autorotation=controller.autorotation;
q=f1.add(controller, 'autorotation').listen().onChange( function()
{
    autorotation=controller.autorotation;

});

function onDocumentMouseDown(event)
{
    controller.autorotation=false;
    //stop autorotation and uncheck the box.
    //user may check the box for rotation manually by clicking on checkbox.
}

This code is functioning as intended. I am able to uncheck the checkbox through the code by setting Controller.autorotation=false, but it does not completely stop auto rotation. If I manually stop rotation with autorotation=false, then I need to click on the checkbox twice to check it to true.

javascriptcheckboxthree.jsdat.gui

Answer №1

Everything seems to be running smoothly with your code. The only thing missing is adding an event listener to the object you want to track clicks on.

As an example, I inserted a canvas element and included the onDocumentMouseDown function for its mouse down event.

In my opinion, there's no need for the autorotation variable since you already have contorller.autorotation, which can be easily referenced.

controller = new function() {  
    this.autorotation=true;
}
var gui = new dat.GUI();
f1 = gui.addFolder('Sphere');
q=f1.add(controller, 'autorotation').listen().onChange( function()
{
    autorotation=controller.autorotation;

});

scene.addEventListener("mousedown", onDocumentMouseDown, false);
function onDocumentMouseDown(event)
{
    controller.autorotation=false;
    //stop autorotation and uncheck the box.
    //user may check the box for rotation manually by clicking on checkbox.
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<canvas id="scene" style="border:1px solid red;background-color:aqua;"></canvas>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing me from utilizing a custom Pin it button instead of the default one?

This might not be related to code, but I am facing an issue that I can't seem to resolve. I'm attempting to use a square .png image as a "Pin It" button instead of the default one provided by Pinterest. Below is the code snippet where I am imple ...

javascripthtmlpinterest

disabling swap button icons temporarily in Angular 16

I need assistance creating a function that removes an icon from a button and replaces it with a spinner provided by primeng. The function should only remove the child element. Code snippet for the button: <p-button label="" [loading]="lo ...

javascriptangulartypescript

How can I prevent the content from being pushed when the sidebar is opened in JavaScript and CSS? I want to make it independent

I'm struggling with making the sidebar independent of the main content when it's opened. I've included the CSS and JavaScript code below. Can someone provide assistance with this? function ExpandDrawer() { const drawerContent = docu ...

javascripthtmlcsssidebar

sending arguments to a function within ng-show

How can I properly call a function with a parameter in ng-show without errors? I encountered the error Error: [$parse:syntax] Syntax Error: Token ']' not a primary expression at column 8 of the expression [cheked[]] starting at []]. The parameter ...

javascripthtmlangularjs

Utilizing Vuelidator in VueJs to validate input values and handle error messages

Upon reviewing the documentation for Vuelidator at this particular link, I encountered an error when attempting to utilize this specific javascript package: [Vue warn]: Error in v-on handler: "TypeError: target is undefined" The process of insta ...

javascriptvue.jsvuejs2vuelidate

Guide to Implementing Code Splitting in Webpack 4 for a Library that Exports Separate Modules in a Similar Manner to Lodash or Office Fabric UI

I currently have a large custom NPM library that is utilized by multiple teams within the organization. The library is currently published as one extensive single file, similar to the main lodash file. However, this approach results in bloated application ...

javascriptnpmwebpackmodulecode-splitting

Revise Script to Duplicate Alt Attribute onto Miniatures

I'm customizing a gallery plugin for a website that I am currently developing, aiming to add support for titles. The script I am using can be found here: DEMO: http://jquery.malsup.com/cycle/pager2.html CODE: All the functionalities are in place e ...

javascriptjquerygalleryimage-galleryphoto-gallery

jQuery failing to trigger onClick event for a specific group of buttons

Javascript: <script> $(document).ready(function(){//Implementing AJAX functionality $(".acceptorbutton").on('click', function(){ var whichClicked = this.attr('name'); ...

javascriptphpjqueryhtmlajax

What could be causing my PUT and DELETE requests to return a 404 status code?

I have encountered a problem with my MEN back-end app. In the express client router, I declared PUT and DELETE requests but they are returning a status 404 not found error. However, the POST request is functioning correctly. Could this ...

javascriptmongodbexpressmongoosex-http-method-override

Guidelines for Document State

I am looking to develop a straightforward directive that can show the status of a document. Currently, I have achieved this functionality through the controller without using a directive. However, my goal is to create a reusable directive. https://i.sstat ...

javascriptangularjsangularjs-directive

Facing a 404 error with react-router while manually typing in the URL

I've encountered an issue with my project. Everything was working fine with createBrowserRouter until I deployed it. When I manually enter the URL, I get a 404 error for all pages except the landing page. Below is a snippet of my code: main.jsx impo ...

javascriptreactjsreact-router

XCODE encountered an issue while attempting to open the input file located at '/Users/name/Desktop/test/appname/node_modules/react-native-compressor/ios/Video/Compressor-Bridging-Header.h'

Encountering an issue while running my project in XCode. I recently added the react-native-compressor package by following the steps mentioned in the installation guide When attempting to run the project in XCode, the error below occurs: <unknown> ...

javascriptiostypescriptxcodereact-native

Enhance the material-table component by incorporating dynamic information into the lookup property

I am currently facing challenges while attempting to dynamically add data to the lookup property in the Material-Table component. The lookup is structured as an object, and you can refer to its definition in the initial example provided here. However, it ...

javascriptreactjsmaterial-table

Check if the input values are already in the array and if not, then add

Within my React application, I am displaying an Array and each entry in the Array is accompanied by an input element. These input elements are assigned a name based on the entry's ID, allowing users to enter values. To handle the changes in these inp ...

javascriptarraysreactjstypescriptobject

Do you need permission for a Chrome extension to access data on a website?

I recently developed a website and a corresponding chrome extension. My goal is to access all data on my site, including reading and writing cookies. To achieve this, I added the following code snippet to the manifest file (let's assume my website i ...

javascripthtmljsongoogle-chromegoogle-chrome-extension

JavaScript sorting code fails to properly sort numbers

Here is a code snippet that aims to convert a string into an array of numbers and then sort them in descending order. The objective is to find an alternative to the sort() method. However, there seems to be an issue with the current implementation. When t ...

javascriptarrayssorting

Experimenting with parallelism using TypeScript/JS

Currently, I am tackling a TS project that involves testing concurrent code and its interactions with a database, specifically focusing on idepotency. My goal is to ensure that multiple requests modifying the same resource will either apply changes correct ...

javascripttypescripttestingconcurrency

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

I'm looking to customize the placeholder text in an input field. I want the main placeholder text to be in black and have a red star indicating it's a required field. However, my attempt to set the color of the star specifically to red using `::- ...

javascriptjqueryhtmlcss

What is the best way to position a div below a sticky navbar?

I have implemented a sticky navbar on my index page along with JavaScript code that adjusts the navbar position based on screen height. When scrolling, the navbar sticks to the top of the page, but the flipping cube overlaps with the sticky navbar. How can ...

javascripthtmljquerycssnavbar

Having trouble initializing an array of objects to store data in MongoDB using AngularJS

I am facing an issue while trying to save dynamically created HTML in MongoDB using Mongoose from AngularJS. The problem lies in creating the required object that matches the Mongoose schema I have defined. model code var SegmentSchema = new Schema({ n ...

javascriptangularjsnode.jsmongodb