We Keep Coding

<button> inside <a> is reloading the page

I have an react app with structure like this.
private navigate(){
alert("navigate");
}
<a href="#gotothisid">
<button onclick="navigate()"></button>
</a>
<div id="gotothisid">
</div>
On click, the page is reloading after the alert but it should just shift the focus to #gotothisid.
What is missing here? Is there anyway to achieve both button click and a href together without reloading the page?
I want to achieve both button click and a href together without reloading the page.

The default behaviour of a button is submit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type.
You just have to add:
<button onclick="navigate()" type="button"></button>
so your button won't trigger a submit that reload the page.

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.

Open Bootstrap Model and Load load iframe with one button

I need a button to open both "Bootstrap Modal" and Load iframe.
for now i have following concept:
User click on Modal Button Modal opens and then user need to click on another button in the Modal to load the iframe.
i found some solutions, but most of them using javascript with url in it. in my case i cant use this because i get the url from a button where this button has a dynamic id that get generated by a shortcode. as well i cant add this shortcode in the javascript, i already tried.
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#fileShareModal[wpv-post-id]">Open Modal</a>
<a class="btn btn-warning" href="[wpv-post-url]?layout_id=201" target="myiFrame[wpv-post-id]">click to load iframe</a>
<iframe name="myiFrame[wpv-post-id]" src="about:blank" class="max-h-600"></iframe>
I would like to get the dropdown-item button to open the modal and load the iframe. is that possible while keeping the structure of my urls the same?

You can open modals with jquery:
`
$(selector).modal("show");
`
So that means you can add an event to the button wich loads the iframe, and also open the modal
You need to add ids to each button:
`
$(idOfTheIframeLoader).click(e =>
$(idOfModal).modal("show")
);
`

Change aria-expanded="true" to false on page load

This is the button that triggers the side menu open / close on Moodle boost theme. I am trying to keep the menu hidden by default on page load.
So, I need to set <button aria-expanded="true" to <button aria-expanded="false" on page load. However, all the Javascript snippets I have tried need the element to have an 'Id' or a 'Name'; and this button has neither.
Question : How to I change the <button aria-expanded="true" to <button aria-expanded="false" on page load - without changing the source code of Moodle ?
<button aria-expanded="true"
aria-controls="nav-drawer"
type="button"
class="btn nav-link float-sm-left mr-1 btn-secondary"
data-action="toggle-drawer"
data-side="left"
data-preference="drawer-open-nav">
<i class="icon fa fa-bars fa-fw "
aria-hidden="true" aria-label="">
</i>
<span class="sr-only">Side panel</span>
</button>
Tried so far : I have searched if someone has done this already. Could not find anything. Tried several onload Javascript snippets, but nothing worked. Will appreciate some guidance & help.

You can look for the icon or a more specific element since the icon can be used more than once (or select it with :nth-child) and look up the previous element with jQuery. Then change the attribute of the button accordingly.
$('.icon fa fa-bars fa-fw').prev().attr("aria-expanded","false");

Below is the link to my codepen solution written in pure javascript and here is the explanation:
var btn = document.querySelectorAll("button"), dropdownBtn;
window.onload = function(){
for (var i=0; i<btn.length; i++) {
if(btn[i].getAttribute("data-action") == "toggle-drawer") {
console.log(btn[i]);
btn[i].setAttribute("aria-expanded", "false");
break;
}
}
};
Since you don't have any unique class or id o your button so went ahead and assumed that any one of the data-attribute on your button is unique (in this case data-action). Also, I assumed that your HTML document has many buttons hence I selected all the buttons and then iterated all over them to find the data-action attribute and as soon as I found it I set its aria-expanded value to false and exited the loop.
And all these happened while the document is loading.

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.