changing the state of a bootstrap button once a task is completed

I've designed a Bootstrap 5 button to control the motor:

<button id=button_90 onclick="return motor_turn(512)" class="btn btn-primary" type="button">90</button>

Clicking the button highlights it in blue, and successfully turns the motor. Here's the code for my on-click function:

function motor_turn(steps){
        $.get('/move_motor_ep', 
            {
            'steps': steps,
            'motorPinsXX': JSON.stringify(motorPins)
            },
        function(data, status){
            //alert("Data: " + data + "\nStatus: " + status);
            console.log("Move_motor status: " + status);
            });
        console.log("Toggling button back");
        //$(button_90).toggle();
        $('button_90').blur();
        return false; //prevent auto-navigation to button URL
    };

After the motor operation is completed, I'm trying to remove the highlight from the button. I've attempted using 'blur' and 'toggle', but with no luck. As someone new to JS and UI programming, I would appreciate any guidance on this matter.

Answer №1

Your selector string $('button_90') contains an error. The correct way to target the button with id 'button_90' is by prefixing it with the '#' character like this: $('#button_90')

An efficient and universal method to remove focus from the currently focused element is using vanilla JavaScript:

document.activeElement.blur()

Learn more at

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

Can you explain the variance between the two state updates in React?

Currently enrolled in a React course where the instructor is diving into state updates. I'm struggling to grasp the internal differences between these two code snippets, provided below for reference: Snippet that updates state directly class Counter ...

Error: Unable to save document - Document.save function is invalid

I'm currently working on creating tests for an Express application that involves an User model. One of my methods is structured like this: let user = await User.findById(req.params.userId); user.name = req.body.name || user.name; user.password = re ...

JavaScript code for implementing custom commands on a Discord bot

Currently, I am working on developing a Discord bot using the Discord.js-commando library. Most of the functionalities are up and running smoothly, but I have encountered a roadblock with a specific command. The command in question is !roll, which is desig ...

The conditional rendering issue in Mui DataGrid's renderCell function is causing problems

My Mui DataGrid setup is simple, but I'm encountering an issue with the renderCell function not rendering elements conditionally. https://i.sstatic.net/MEBZx.png The default behavior should display an EditIcon button (the pencil). When clicked, it t ...

The Angular Universal error arises due to a ReferenceError which indicates that the MouseEvent is not

I am encountering an error while trying to utilize Angular Universal for server-side rendering with the command npm run build:ssr && npm run serve:ssr. This is being done in Angular8. /home/xyz/projects/my-app/dist/server/main.js:139925 Object(tslib__WEB ...

Can test files be placed under the pages directory in a Next.js project?

Currently, I am in the process of writing integration tests for the API routes within a Next.js application. One question that has arisen is whether it would be problematic to place the index.test.ts file under the /pages directory. My preference leans tow ...

Using Rails 6 to trigger a JavaScript function after rendering a partial

Newbie in Rails and Javascript here, During a training project, I implemented a feature where flash messages automatically disappeared after a few seconds using JQuery. When a visitor added a product to their cart through an AJAX request, a flash partial ...

How can one effectively separate logic in AngularJS for optimal performance?

I've been diving into AngularJS and it's been quite fascinating, although I do run into some architectural challenges at times. Let me illustrate with an example. Imagine we have an application that enables users to create bills. Each bill consi ...

Determine using Lodash whether there is an object in an array that matches the ID from a separate array

There is a user array defined as follows: var users = [{ id: 1, name: 'ABC', isDisplay: true }, { id: 2, name: 'XYZ', isDisplay: true }, { id: 3, name: 'JKL', isDisplay: true }]; Additionally, there is another arra ...

Setting a completion flag using a factory in AngularJS

I'm struggling to create a factory that can set a completion flag for a value within an object. The object in question looks like this: {"key1":"value1", "key2":"value2", "key3":"value3"} My goal is to retrieve and operate on the value associated wi ...

Utilizing Node.js to insert data into separate MongoDB schemas

data.js var dataSchema = Schema({ item : String, description : String, category : { type: Schema.Types.ObjectId, ref: 'Category' } }); var Data = mongoose.model('Data&a ...

Steps for totaling checkbox calculations1. Begin by selecting each checkbox

Trying to figure out this issue. There are 6 checkboxes with different prices on each one. When a user clicks on a checkbox, the price is displayed in the total box. If another checkbox is clicked, the total price goes up accordingly. Any insights would ...

What is the best way to obtain clear HTTP request data in a component?

My service retrieves JSON data from the backend: constructor(private http: Http) { }; getUsers(): Observable<any> { return this.http.get('http://127.0.0.1:8000/app_todo2/users_list'); }; In the component, this data is processed: ng ...

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

My HTML structure uses ul and li elements as shown below: <ul class="treeview" id="productTree"> <li class="collapsable lastCollapsable"> <div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div> <span ...

Ordering results based on function output within a v-for loop in Vue.js

In my code, I have an array that I am looping through in the following way: <template v-for="plan in plans"> ... </template> My goal is to sort the plans array by a calculation based on certain properties of each plan. Let's ...

In a React component, clicking on a download anchor tag will open the file in a browser without automatically initiating the

I am currently working on a React component where I have implemented a download function to download a file upon clicking: <a key={file.attachmentId} className="item uploaded" href={Pathes.Attachments.getById(file.attachmentId)} target="_blank" ...

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

Having trouble loading the linked CSS file in the Jade template

My directory structure is organized as follows: --votingApp app.js node_modules public css mystyle.css views test.jade mixins.jade In the file mixins.jade, I have created some general purpose blocks like 'bo ...

What is the process for modifying the logfile path in phantomjs using selenium?

Is there a way to modify the default --webdriver-logfile parameter that selenium passes to phantomjs when using them together? This is the line in the selenium log: 11:06:06.960 INFO - arguments: [--webdriver=14380, --webdriver-logfile=<ROOT PATH DELE ...

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

I am currently working with QuickBase, a platform that involves HTML. My goal is to develop a code that can take a [fixed date] (always in the past) and increment it by 3 months until the MM/YYYY exceeds or equals the MM/YYYY of the [creation date]. Once t ...