We Keep Coding

How to open offcanvas programmatically in Bootstrap 5? - javascript

I have a bottom offcanvas in my webpage, i would open it on a card click, by trying to set the needed attributes or by using the code from the docs it's not working as the offcanvas shows only the backdrop and dismiss it immedialty.
Here is what i've tried:
const products = document.getElementsByClassName("card product");
var productClick = function (event) {
event.preventDefault()
var myOffcanvas = document.getElementById('offcanvasBottom')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
bsOffcanvas.show();
};
Array.from(products).forEach(function (element) {
element.addEventListener("click", productClick);
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div class="card product" style="width: 18rem">
<div class="card-body text-center">
<h2 class="card-title fw-bolder">TEST</h2>
<p class="card-text fw-bolder">TEST</p>
</div>
</div>
<div
class="offcanvas offcanvas-bottom"
tabindex="-1"
id="offcanvasBottom"
>
<div class="offcanvas-header">
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
BODY
</div>
</div>

The problem is the card click event is propagating to inside elements. Instead use event.stopPropagation()...
const products = document.getElementsByClassName("product");
var myOffcanvas = document.getElementById('offcanvasBottom')
var productClick = function (event) {
//event.preventDefault()
event.stopPropagation()
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
bsOffcanvas.show()
}
Array.from(products).forEach(function (element) {
element.addEventListener("click", productClick);
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div class="card product" style="width: 18rem">
<div class="card-body text-center">
<h2 class="card-title fw-bolder">TEST</h2>
<p class="card-text fw-bolder">TEST</p>
</div>
</div>
<div
class="offcanvas offcanvas-bottom"
tabindex="-1"
id="offcanvasBottom"
>
<div class="offcanvas-header">
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
BODY
</div>
</div>

Related

I'm trying to add a clickable helping zone in my Bootstrap 5 accordion, as you can see in this screenshot :
I want the user to be capable of clicking the question mark, that will open a Bootstrap modal with some helping text.
However, when doing so, the modal is opening but the accordion is collapsing (or opening if closed).
I've used the following JavaScript code to achieve this goal :
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}
Any clues how I can prevent the accordion to collapse/open when clicking the help icon ?
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button onglet-header" type="button" data-bs-toggle="collapse" data-bs-target="#nom_pays" aria-expanded="true" aria-controls="nom_pays">
Accordion <i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
</button>
</h2>
<div id="nom_pays" class="accordion-collapse collapse show" aria-labelledby="nom_pays_header" data-bs-parent="#fiche_bois">
<div class="accordion-body">
Accordion Body
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Data</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"/>
</div>
<div class="modal-body">
Modal body
</div>
</div>
</div>
</div>
</body>
</html>

You do not have to write extra JavaScript to trigger modal.
You can easily do it with the bootstrap html attributes.
In order to trigger your modal, by clicking the question mark
Replace:
<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
With:
<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#modal"></i>

I am using the code below to show a toast on page load in HTML and JS,
<!-- Toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script>
window.onload = (event) => {
let myAlert = document.querySelectorAll('.toast');
let bsAlert = new bootstrap.Toast(myAlert);
bsAlert.show();
5}
</script>
but nothing is showing on page load, hope you can help?
Thanks

document.querySelectorAll returns multiple elements, you just want one element for bootstrap.Toast. I've created a snippet of your code with a slight modification, i.e. getting the first .toast and then checking it exists.
window.onload = (event) => {
let myAlert = document.querySelectorAll('.toast')[0];
if (myAlert) {
let bsAlert = new bootstrap.Toast(myAlert);
bsAlert.show();
}
};
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

I am programming an action where after a button press, games on the platform "console" or "pc" is shown. I would like it when the button for "pc" is pressed first, all pc games are shown. And after when the "console" button is pressed, all "pc" games are removed and then all "console" games are appended
code for the buttons is this:
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
code for the function is similar across the two buttons;
function searchPC() {
$("search").replaceWith(`<div></div>`);
axios
.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts);
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").replaceWith(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
What I have attempted is to replace any info with an empty div, then adding the desired information, however, it still shows the older information (referring to above, "pc" is still shown even after pressing "console".
Furthermore, I have more than 1 card to add, ie there are >2 sets of information for console and pc games
original file with js included is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Friendbook</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class='bg-dark'>
<div class="container-fluid bg-dark">
<div class="">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<div>
<img src="http://localhost:8082/images/image.jpg" alt="logo" style="width:40px;" id="logo">
</div>
</a>
<a class="nav-link" href="/">Home</a>
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark mt-1">
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchP' type="text" placeholder="Search by Price">
<button class="btn btn-success" type="submit">Search</button>
</form>
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchN' type="text" placeholder="Search by Name">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<div class="row" style="margin-top: 2rem;">
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>Search Games</h4>
<div id="search" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>All Games</h4>
</div>
</div>
<div class="row" style="margin-top: 2rem;">
<div class="col-md-11 col-xs-12 ml-5">
<div id="posts" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
</div>
<footer class='bg-dark p-3'>
<div class='ml-2 mt-2'>
<form>
<button class="btn btn-success" type="submit" onclick="logout()">logout</button>
</form>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const baseUrl = "http://localhost:8081";
const token = localStorage.getItem("token");
const loggedInUserID = parseInt(localStorage.getItem("loggedInUserID"));
if (token === null /* || isNaN(loggedInUserID) */) {
window.location.href = "/login/";
} else {
axios.get(`${baseUrl}/gameall/all`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});
/*
axios.get(`${baseUrl}/game/console/`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
${post.description}
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
<p class="card-text">${post.price}</p>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});*/
//acts as addpost api
$("#create-post-form").submit((event) => {
// prevents the page from refreshing
event.preventDefault();
const requestBody = {
text_body: $("#create-post-form-body").val(),
fk_poster_id: loggedInUserID
};
// create the post
axios.post(`${baseUrl}/posts/`, requestBody)
.then((response) => {
// reset form value.
$("#create-post-form-body").val("");
// fetch the post with the returned postID
axios.get(`${baseUrl}/posts/${response.data.postID}`)
.then((response) => {
const post = response.data;
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body sm-6">
<p class="card-text">${post.text_body}</p>
</div>
<div class="card-footer text-muted">
${post.created_at}
</div>
</div>
`;
$("#posts").append(postHtml);
})
.catch((error) => {
console.log(error);
});
});
});
}
function logout() {
localStorage.removeItem('token')
localStorage.removeItem('role')
localStorage.removeItem('id')
}
function searchPC() {
axios.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
function searchCon() {
axios.get(`${baseUrl}/game/console`)
.then((response) => {
const posts = response.data;
posts.forEach((post) => {
const postCHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postCHtml);
});
})
.catch((error) => {
console.log(error);
});
}
</script>
</body>
</html>```

I think you need to use **html(htmlString) **
Description: Set the HTML contents of each element in the set of matched elements
replace $("#search").replaceWith(postPHtml);
with $("#search").html(postPHtml);
see:https://api.jquery.com/html/

Im trying to get a list of ID values for each group of parent divs. Using draglua a site is dragged into a group, then I would like to create a dictionary string that I can submit to a server side form and process it.
That dictionary string should contain a list of all the ids within each group, my script below currently works for one group (A) but not all groups, im assuming there is a better approach to get all groups in one?
So after a user has dragged sites into groups I would like to be able to click apply groups then the the value of site_groups is set to
[{group: a, ids: [3,4,5]},{group: b, ids: [31,4]},{group: c, ids: [8]},..etc]
I can then submit this and process it server side, is anyone able to assist?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css"
integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.drag-space {
width: 100%;
min-height: 20px;
}
</style>
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper">
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<!-- /.card -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<div class="d-flex flex-row justify-content-between">
<div><i class="fa fa-layer-group fa-fw"></i> Change Groups</div>
<div class="text-muted mb-1 small">
<a class="btn btn-sm btn-outline-primary" id="apply-tab" href="javascript:post();">Apply group changes</a>
</div>
</div>
</div>
<div class="card-body">
<form id="sitegroups_form" method="post">
<input type="text" id="site_groups" />
</form>
<div class="row">
<div class="col-3">
<h4>A - <small class="text-muted">1 Sites</small></h4>
<div id="drag-A" class="drag-space">
<div id="7">
Aberdeen
</div>
</div>
</div>
<div class="col-3">
<h4>B - <small class="text-muted">0 Sites</small></h4>
<div id="drag-B" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>C - <small class="text-muted">0 Sites</small></h4>
<div id="drag-C" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>D - <small class="text-muted">0 Sites</small></h4>
<div id="drag-D" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>E - <small class="text-muted">0 Sites</small></h4>
<div id="drag-E" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>F - <small class="text-muted">0 Sites</small></h4>
<div id="drag-F" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>G - <small class="text-muted">0 Sites</small></h4>
<div id="drag-G" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>H - <small class="text-muted">0 Sites</small></h4>
<div id="drag-H" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>I - <small class="text-muted">0 Sites</small></h4>
<div id="drag-I" class="drag-space">
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card">
<div class="card-header">
<i class="fa fa-layer-group fa-fw"></i> Sites not in change Groups
</div>
<div class="card-body">
<div class="row" id="drag-source">
<div id="8" class="col-3">
London
</div>
<div id="9" class="col-3">
New York
</div>
<div id="10" class="col-3">
Manchester
</div>
<div id="11" class="col-3">
Liverpool
</div>
<div id="12" class="col-3">
Edinburgh
</div>
<div id="13" class="col-3">
Tokyo
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"
integrity="sha256-rVf3H94DblhP4Z6wLSa2mpMwRS5qePBWykE6QWPOaO0=" crossorigin="anonymous"></script>
<script type="text/javascript">
// Begin Dragula JS
var drake = dragula([document.querySelector('#drag-source'), document.querySelector('#drag-A'), document.querySelector('#drag-B'), document.querySelector('#drag-C'), document.querySelector('#drag-D'), document.querySelector('#drag-E'), document.querySelector('#drag-F'), document.querySelector('#drag-G'), document.querySelector('#drag-H'), document.querySelector('#drag-I'),]);
// when item dropped
drake.on('drag', function (el,target,source,sibling) {
el.classList.remove('col-3');
})
// get the items within a group
$("#apply-tab").click(function(){
var a_children = document.querySelectorAll("#drag-A div");
var a_ids = []
for (var i = 0; i<a_children.length; i++) {
a_ids.push(a_children[i].id)
}
var group_a_ids = '{group: a, ids: ['+ a_ids +']}';
$("#site_groups").val(group_a_ids);
});
</script>
<!-- End custom js for this page-->
</body>
</html>

To anwser your question regarding the need to account for all groups at once (without taking care of the drag and drop part), you can take benefit of the HTML class drag-space, as follows:
$("#apply-tab").click(function(){
var group_ids = {};
$(".drag-space").each(function() { // Loop over all items of class 'drag-space'
var id = this.id;
var key = id.replace(/drag-/, "").toLowerCase();
var children = document.querySelectorAll("#" + id + " div");
var ids = []
for (var i = 0; i<children.length; i++) {
ids.push(children[i].id)
}
group_ids[key] = ids;
});
$("#site_groups").val(JSON.stringify(group_ids));
});

So, I have my btc and hashs, and when I click start mining, I want it to have every 1 second it adds btc to my balance equal to the number of hashs I have, so if I have 1 satoshi, and 1 hash and I spend 1 second mining, I get 2 btc, then , then 4.
Also can you guys check and make sure I put my timers the right way?
My code is:
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<pre> </pre>
<div class="container">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<i class="fab fa-btc" height="32" width ="32"></i>
<p class="card-text">Satoshis: <span id="btc"></span></p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Hashs: <span id="hashs"></span></p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">upgrades button here with popup tab</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text"><p id="btcmina"><button type="button" onclick="btcmining()" class="btn btn-light">Begin Mining</button></p></p>
</div>
</div>
</div>
</div>
<pre> </pre>
<div class="container">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<i class="fab fa-monero" height="32" width ="32"></i>
<p class="card-text">monotoshis here</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">mono hashs here</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">upgrades button here with popup tab</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Start mining button here with css button</p>
</div>
</div>
</div>
</div>
</body>
<script>
var btc = Number(localStorage.getItem("btc") || "1");
var hashs = Number(localStorage.getItem("hashs") || "1");
function btcmining() {
document.getElementById('btcmina').innerHTML = "<p id=mini><button type=button class=btn btn-primary onclick=stopbtc()>Stop Mining</button></p>";
updateTimer = setTimeout(updatey, 1000000)
minebtcTimer = setTimeout(btcmining, 1000);
}
function update() {
document.getElementById('btc').innerHTML = btc;
document.getElementById('hashs').innerHTML = hashs;
localStorage.setItem("btc", btc);
localStorage.setItem("hashs", hashs);
}
function updatey() {
document.getElementById('btc').innerHTML = btc;
document.getElementById('hashs').innerHTML = hashs;
localStorage.setItem("btc", btc);
localStorage.setItem("hashs", hashs);
btcmining()
}
function stopbtc() {
document.getElementById('mini').innerHTML = "<p id=btcmina><button type=button onclick=btcmining() class=btn btn-primary>Begin Mining</button></p>"
clearTimeout(updateTimer);
clearTimeout(minebtcTimer);
}
update();
/*document.getElementById('ao').onclick = function () {
btc++;
update();
}
document.getElementById('hash').onclick = function () {
hashs++;
update();
}*/
// <button id="ao">Add One</button>
</script>
</html>

Read the number from local storage, add to it, then store the new number back in local storage.
setInterval(add_to_localstorage, 1000);
function add_to_localstorage() {
var btc = Number(localStorage.getItem("btc") || "1");
btc = btc + 1;
localStorage.setItem("btc", btc);
}
This just adds 1, if you want to add something else you can replace that line with whatever calculations you actually want to do, such as counting the number of hashes and adding that.