Develop Reference

Edit onclick url in button

I'm trying to edit the url in a button onclick event. Below is the source of the button and the text I'd like to strip from the onclick portion. The end goal is to have a Tampermonkey script that allows me to easily download stp files without manually editing a link after clicking it.
Remove
"fusion360://command=insert&file=" +
From
<button type='button' class="event btn btn-default btn-lg btn-block" onclick='window.location.href = "fusion360://command=insert&file=" + encodeURIComponent("https://assets.sas-automation.com/cad/SWM%203.stp");' data-category="Product Sidebar Right" data-action="Button Click" data-label="Opened CAD File in Fusion" aria-label="button">Open in Fusion360</button>

There are many ways to achieve this, here is one that came to my mind:
Use a getElementsByClassName (or any other selector function) to grab the button
Save the onclick attribute value (which is of text type) to a variable
Find the given substring and replace it with an empty string
Save the result back to the button's onclick attribute.
NOTE: your solution has a gotcha: in order to get a proper redirect on button click, you have to remove the method encodeURIComponent since the url appears to be encoded already.
And you should be good to go. You can play with the snippet.
var button = document.getElementsByClassName('event btn btn-default btn-lg btn-block')[0];
var onClick = button.getAttribute('onclick')
.replace(/"fusion360:\/\/command=insert&file="\s*\+\s/, '')
.replace('encodeURIComponent(', '')
.replace(');', '');
button.setAttribute('onclick', onClick);
<button type='button' class="event btn btn-default btn-lg btn-block" onclick='window.location.href = "fusion360://command=insert&file=" + encodeURIComponent("https://assets.sas-automation.com/cad/SWM%203.stp");'
data-category="Product Sidebar Right" data-action="Button Click" data-label="Opened CAD File in Fusion" aria-label="button">Open in Fusion360</button>

How to click on particular button if multiple buttons are having same classes in protractor?

Html code
<button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button>
In angular protractor, is there any way to click on particular button if multiple buttons are having same classes. Please help me out on this.

you can distinguish the button by the button text. Like yiu can grab the element (button) by button text and perform your desired action
<button>Save</button>
element(by.buttonText('Save'));

You can click on the button by :-
By Id :
element(by.id('id')).click().then(function() {
});
By xpath :
element(by.xpath('//div[#id="ui-datepicker-div"]//a[#title="Next"]')).click(); // whatever your xpath is

Redirecting button after selection

I have two buttons (describing the type of delivery). Once selected I have to press another button to proceed . Is there any way how I can proceed automatically after selection?
Here is my code before selection:
<button type="button" class="button btn-delivery-method" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my code after selection:
<button type="button" class="button btn-delivery-method delivery-method__selected" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my third button to proceed:
<button type="button" class="button btn-large--alt" onclick="shippingMethod.save()">
Continue
</button>
Thanks

You can add the onclick event to the first two buttons.
Btw, what does the code do after pressing either of the first two buttons?

Bind a click event to the first button as well:
$(".button.btn-delivery-method").click(function() {
// check if the delivery has been selected
if($(this).hasClass("delivery-method__selected")) {
// either call shippigMethod.save(); here
//trigger the button click
$(".button.btn-large--alt").trigger("click");
}
});
This will trigger the button only when the delivery is selected
if($(this).hasClass("delivery-method__selected")) {
$(".button.btn-large--alt").trigger("click");
}

It would be nice to have the Id from your second button just to avoid any conflicts with other buttons.

Nested function in jQuery

I am new to javascript and jQuery. I am writing the following code to edit a portion of my web page. It is working perfect when I click on #edit_case first time but after clicking #cancel that returns me back. The #edit_case does not work.. What is wrong with this piece of code?
$("#edit_case").click(function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
$("#cancel").click(function(){
$("#editable").html(oldHTML);
});
});
My HTML markup is like:
<div class="panel panel-default" id="editable">
<div class="panel-body">
Drop-down code
<li><a id='edit_case'>Edit</a><li>
Panel-Body Code...
</div>
Panel footer
</div>
When I click on Edit, the same text input fields appear as that on stackoverflow.com. On first time, Edit link works fine but when I cancel Edit both Edit and Delete do not work. I think click event is not occurring as I also have tried a check on it by using alert('test') and it isn't appeared after clicking on #cancel. Is this a problem of unbinding event? If it is, how would I correct it?

since the cancel button was not in the dom at first and since you are removing the edit_case, you need to do it with an ".on" put this code in the loading, not in the click event. if you put it in the click event, you will have multiple event that will be registered.
with working fiddle:
https://jsfiddle.net/2hjr6g94/
$(document).on('click','#cancel',function(){
$("#editable").html(oldHTML);
});
var oldHTML = $("#editable").html();
$(document).on('click','#edit_case',function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
});

After running it once, the new html is in the variable value of "oldHtml". You need to store the old HTML outside of this functionality, so it is preserved.
Here is the process you are doing right now:
Get html.
Load new html.
Get html (now new html).
load oldHtml (still new html).
oldHtml gets overridden and stored everytime this function is called.

Hover state stuck on buttons after click

I have a form with two states: editing and visible. When you click an icon to edit the form two buttons (acting like submit) at the bottom appear to save or cancel. When I click them the form is updated (or cancelled) and the buttons disappear. The problem is when I re-open the form to edit it (and the buttons are visible again) the last one clicked still has it's hover state applied in Chrome.
<div>
<div class="col-xs-5">
<button class="btn btn-primary pull-right" ng-click="save(true)">Save</button>
</div>
<div class="col-xs-5 cancel-btn">
<button class="btn btn-primary pull-left" ng-click="cancel()">Cancel</button>
</div>
</div>
For simplicity here is just the cancel function...
$scope.cancel = function() {
//set a flag for angular to hide/show editing mode in HTML
$scope.editMode = false;
};

As mentionned in an earlier comment (runTarm), this is because of the active/focused state of the buttons.
To change it :
.btn-primary:active,
.btn-primary:focus {
// place your 'default' styling over here
}
You will probably need to be more specific with your declaration because what I posted will override all the items with class btn-primary.
Hope this helps !