We Keep Coding

Trying to change the span class for a submit button to show bootstrap loading spinner

I'm trying to get a submit button to change to a loading spinner with the text "Loading..." using JavaScript like the image below.
I'm able to update the innerHTML for the button, but I'm having trouble changing the span class, which controls the actual spinner.
Here is my html for the button:
<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
<span id="button_span"></span>
Submit
</button>
And here is the JavaScript:
function loading() {
var button = document.getElementById("submit");
button.innerHTML = "Loading...";
var span = document.getElementById("button_span");
span.classList.add("spinner-grow");
span.classList.add("spinner-grow-sm");
}
Any help would be greatly appreciated. Thanks.

Here you have a working pen:
https://codepen.io/cbrown___/pen/dyMKQQb
Using Jquery and Font-awesome.
THere are many ways of doing this, but this is one of them.
HTML
<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
<i class="fas fa-spinner fa-spin" style="display:none;"></i>
<span class="btn-text">Submit</span>
</button>
.JS
function loading() {
$(".btn .fa-spinner").show();
$(".btn .btn-text").html("Loading");
}
Recommend also this solution:
Bootstrap 4 Loading Spinner in button

I don't think you should be changing the inner HTML or class of the button. Create a new span that is the loading animation but hidden by default with css prop display: none.
When the button get clicked hide the button by dynamically changing the css and show the span the same way. Then whenever the loading is done just flip it back.

How to toggle one of many links with icons using JavaScript

I have several dynamically created links which rendered as buttons and the buttons texts are replaced with icons. I need to toggle one of the link button icons when clicked. The method that I am using is not working out. See code below: I do not want to use JQuery at this time unless it’s within a function.
<a class="button" onclick="command('removeFormat');" title="Remove Format"><i class="fas fa-eraser"></i></a>
<a class="button" onclick="command('fullScreen');" title="Full Screen"><i class="fas fa-expand"></i></a>
<a class="button" onclick="doToggleView();" title="Source"><i class="fa fa-code"></i></a>
<a class="button" onclick="submitForm();" title="Save"><i class="far fa-save"></i></a>
//JS
function command(cmd){
if(cmd == 'fullScreen'){
$(".fa-expand").toggleClass('fa-expand fa-compress');
}else{
$(".fa-compress").toggleClass('fa-compress fa-expand');
}
}
I also try using the following codes:
$("i").toggleClass('fa-compress fa-expand');
$("a .button").find("i").toggleClass('fa-expand fa-compress');

This is the fix to resolve the issue.
function command(cmd){
$('i.fas').toggleClass('fa-expand fa-compress');
}

ng-click not working in font-awesome icon

I have added my demo to: this link When I click on thumbs up (comes from fontawesome) ng-click does not trigger and like count does not change. When I click to xyz, like count increases.
This is not working:
<i ng-click="LikeComment(comment)" class="far fa-thumbs-up"></i> {{comment.like}}
But this is working:
<i ng-click="LikeComment(comment)">xyz</i> {{comment.like}}

Try this:
<span ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></span>{{comment.like}}
OR, in case you are ok with a button
<button ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></button>{{comment.like}}

Font awesome turns it into a <svg> tag which doesn't seem to collaborate too well with the click handler. Try wrapping the <i> in a <div> like this
https://jsfiddle.net/wewekvkw/26/

Clicking a button/href with JavaScript/Jquery by class name

I'm trying to click a button that brings up an edit screen on the same page.
Eg. Click "edit user", edit screen pops up on the same page without redirecting, change name, save. This button does not redirect to a new page.
The code for this button is the following:
<i class="fa fa-pencil"></i> Edit
For some reason I can click every other button on this website that's in the same exact form but I can't click this one. There are no IDs at all so calling by the class name is the only other method I know.
This is what I've tried:
setTimeout(function() {
document.getElementsByClassName(" btn btn-xs btn-inverse btn-modify")[0].click();
}, 3000);
I tried using some Jquery instead as well but no luck. Am I doing something wrong or is this all that I can really do? The other buttons I clicked either redirected me to a different site or just brought up some information on the same screen.
Thanks in advance.
Edit:
It seems that when I try iterating through the different buttons, who all have similar starting class names, I can iterate and click every button except for the edit button. So it's safe to assume that this isn't an issue with the code, so thank you everyone for the help and suggestions.
Edit #2:
Here is the code for all three buttons:
<div class="btn-group"><i class="stm stm-goog"></i> &nbsp
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-bar-chart"></i><button type="submit" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i></button></div>

When searching for elements by class, it's better to use:
document.querySelector(); // Finds first matching element only
and
document.querySelectorAll(); // Finds all matching elements
instead of document.getElementsByClassName() as this returns a "live node list" and hinder performance.
When searching for classes with these methods, remember to include the dot (.) to signify classes and when multiple classes are used, do not include spaces. The spaces are only used when setting multiple classes.
Also, if there is only one class that is unique to the element you wish to find, you only need to search on that one class.
Lastly, only use a elements for navigation. If you simply need something to click, just about any object can have a click event handler.
var edit = document.querySelector(".btn-modify");
edit.addEventListener("click", function(){ console.log("clicked")});
setTimeout(function() {
edit.click();
}, 3000);
// Addtional test
var edit = document.querySelectorAll(".btn.btn-xs.btn-inverse")[1];
edit.addEventListener("mouseover", function(){
console.log("moused over");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group">
<a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse">
<i class="stm stm-goog">X</i> <!-- <-- You missed a semi-colon here. -->
</a>
<a href="#" data-id="29508"
class="btn btn-xs btn-inverse btn-modify">
<i class="fa fa-pencil"></i> Edit
</a>
<a href="#" data-page-modal="https://*randomwebsite*.com/manage/stats/301&q=11"
class="btn btn-xs btn-inverse">
<i class="fa fa-bar-chart">X</i>
</a>
<button type="button" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i>TEST</button></div>

Because you are trying to select the element by its class you need to loop through the elements.
So if you wanna use jQuery you would do like so:
$(".btn-modify").each(function(){
$(this).click(function(){
your code here
});
});

If you want to fetch the element having all the class, try this:
JQuery
$(".btn.btn-xs.btn-inverse.btn-modify")
Plain JavaScript
document.querySelectorAll(".btn.btn-xs.btn-inverse.btn-modify")
Giving a space in between a class names in a css like selector meant that (next one) is a nested element in any depth. use . to indicate its a class, and write them together (without a space) you are searching for elements having all the lasses. And getElementsByClassName is not a css like selector, its can take only a class name and all those element having that class.

Button text with multiple colors

I have an input button element which I would like to include the words "Take me there >" but I want to make the angle bracket a different color from the rest of the text.
Is this possible? I'm happy to use a javascript or jquery fix if necessary.

How about this: http://jsfiddle.net/w3KHd/1/
Use a button with a span inside which sets the font color to whatever color you want. E.g.:
<button>Take me there <span style="color: red"> > </span></button>
Update:
If you want to use the button as a submit button use:
<button type="submit">Take me there <span style="color: red"> > </span></button>

If you can use <button> instead of <input type="button"> you can use "first-letter" Pseudo Class as below.
Your style class:
<style>
button:first-letter {
color:red;
}</style>
Button:
<button type="submit"><Take me there ></button>