toggling the state of a bootstrap button after a function executes

Question

I have created a button in Bootstrap 5 to turn a motor like this:

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

When the button is clicked, a blue highlight around the button appears, and the function call turns the motor successfully. My on-click function code looks like this:

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
    };

I am trying to return the button to the "un-pressed" state (without the blue highlight) upon completion of the motor turn operation. I have tried using 'blur' and 'toggle' without success.

I am very new to JS an UI programming...any help with this would be appreciated.

Answer 1

You have an error in your selector string $('button_90'). That is the correct id of the button however, you must prepend it with the '#' character for jQuery to know it is an id $('#button_90')

The most efficient and portable way to remove focus from the element currently in focus is with vanilla js:

document.activeElement.blur()

see https://stackoverflow.com/a/11278006/6127393