HTML javascript not able to destoy nth element by id

HTML javascript not able to destoy nth element by id - javascript

I am new to javascript and HTML. I developed website using node + express backend and using bootstrap + html + JS in front end. I have created few cards using BS4. It looks like following
Code:
<section id="cards">
<div class="container">
<div class="card-deck text-center">
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Total Cases</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= areaTotal%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Last 30 days</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= arealast30%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Last 7 days</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= arealast7%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Growth</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= areaR%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Deaths</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= areaDeaths%></h1>
</div>
</div>
</div>
</div>
</section>
I want to add one more card if count>0. I have created external div before 5th card and it is working fine with following script.
var deathCount = <%- areaDeaths%>;
if (deathCount == 0){
document.getElementById("divDeath").style.display = "none";
};
However new card is not aligned correctly. Is it anyway I can make 5th element of such id disappear without harming alignment of these cards.
tried so far:
var deathCount = <%- areaDeaths%>;
if (deathCount == 0){
var elements = document.getElementById("mainCards").children;
elements.item(4).style.display = "none";
};

Related

How to know the selected card style and pass the value to the backend

I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>

Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.

Jquery search not working properly in accordion?

Here if search text matches the text of <a> tag I want to hide other unmatched items.
Here what is happening is if the searched input does not match any thing then only the accordion disappears otherwise nothing happens.
I want to display only the accordion which matches the searched text and hide unmatched .How can I do it here ?
script
jQuery("#query").keyup(function () {
var filter = jQuery(this).val();
jQuery("#accordion").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show()
}
});
});
html
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

Your html structure are missing some tags . Then you can iterate through your [data-toggle] element and if match found hide closest card from that elements.
Demo Code :
jQuery("#query").keyup(function() {
var filter = jQuery(this).val().toLowerCase(); //get text
//loop through `a` tag
jQuery("#accordion [data-toggle]").each(function() {
if (jQuery(this).text().toLowerCase().trim().indexOf(filter) < 0) {
jQuery(this).closest(".card").hide(); //hide closest card
} else {
jQuery(this).closest(".card").show()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="query">
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>
</div>
</div>
</div>

This should be easy. its a little mistake that you did.
jQuery("#query").keyup(function () {
var filter = jQuery(this).val().toLowerCase();
// Search function return 0 when it dose not find anything.
// and the Regexp should be using g instead of i so the problem with casesensetive should be solved.
jQuery("#accordion .card-body .col-3").each(function () {
var text = jQuery(this).text().toLowerCase();
if (text.indexOf(filter) == -1) {
jQuery(this).hide();
} else {
jQuery(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

How to filter products using javascript?

I'm unable to make this filter work properly.
All I want is if someone clicks on a particular filter, the products underneath gets sorted accordingly.
I have used data-* attributes for filtering.
HTML:
<section id="store" class="store py-5">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-10 mx-auto col-sm-6 text-center">
<h1 class="text-capitalize">our <strong class="banner-title ">store</strong></h1>
</div>
</div>
<!-- end of section title -->
<!--filter buttons -->
<div class="row">
<div class=" col-lg-8 mx-auto d-flex justify-content-around my-2 sortBtn flex-wrap">
all
cakes
cupcakes
sweets
doughnuts
</div>
</div>
<!--end of filter buttons -->
<!-- store items-->
<div class="row" id="store-items">
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
</div>
</section>
JS:
const storeItems = document.querySelectorAll('.store-item');
const filterBtn = document.querySelectorAll('.filter-btn');
function filterItems(){
filterBtn.forEach(function(btn){
const filter = btn.dataset.filter;
if (filter === "all"){
console.log(filter);
storeItems.forEach(function(item){
item.style.display = "block"
})
}
else if (filter === "cakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "cupcakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cupcakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "sweets"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('sweets')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "doughnuts"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('doughnuts')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
})
}
What happens is on clicking on a particular filter button, only the products having class="doughnuts" gets displayed and the rest sets to display:none.
To better explain there's a demo available here: https://codepen.io/sumayya_ishaq/pen/eYdQaRy

Obtain different values depending on the selection criteria

I would appreciate if you could help me, since I am a novice in programming, I am wanting to obtain different values depending on what I select, and that these numerical values change in each box.
For example, if I select "Loans" in the "new orders" box, the value will be: 312, in the "In process" box 180, in the "Approved" box 56, and in the "Rejected" box 25, as an example .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">25</span>
</div>
</div>
</div>
</div>
</div>
</div>

From what I understand from your question: You want to dynamically change the vales in the boxes based on the selection in the dropdown.
This can be done in 3 steps:
Read value from dropdown
Based on the value above, get the data to be put
Update the HTML with the correct id to show correct data
I am using a hardcoded dictionary, you should structure your data in a similar way to easily update the values as needed.
const sampleData = {
"0": [30, 2, 18, 6],
"1": [435, 234, 38, 84],
"2": [464, 34, 49, 33],
"3": [342, 96, 60, 74]
};
const setValues = () => {
const val = document.getElementById("selection").value;
document.getElementById("new-orders").textContent = sampleData[val][0];
document.getElementById("in-process").textContent = sampleData[val][1];
document.getElementById("approved").textContent = sampleData[val][2];
document.getElementById("rejected").textContent = sampleData[val][3];
};
// setting values initially
setValues();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select" id="selection" onchange="setValues()">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="new-orders">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="in-process">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="approved">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="rejected">25</span>
</div>
</div>
</div>
</div>
</div>
</div>

I added classes to the spans but you could do the same with tag names
works fine for me ;)
let numbers = document.getElementsByClassName("number");
for(let i = 0;i<numbers.length;i++){
numbers[i].addEventListener("click",()=>{
//YOU WILL GET THE NUMBER YOU CLICKED
console.log(numbers[i].innerText);
})
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">25</span>
</div>
</div>
</div>
</div>
</div>
</div>
Run the code to check

how to do sum of two content html into jQuery script

I have two content which are :
<div class="card text-center">
<div class="card-header">
<h5 >Prime</h5>
</div>
<div class="card-body">
<h2 id="Prime_id" class="card-title"></h2>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >Benif</h5>
</div>
<div class="card-body">
<h2 id="benif_id" class="card-title"></h2>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >total</h5>
</div>
<div class="card-body">
<h2 id="total_id" class="card-title"></h2>
</div>
</div>
Every content have this example of value :
<script>
console.log($("#benif_id").html()); //11.578.351 $
console.log($("#Prime_id").html()); //5.877.210 $
</script>
I want to do $("#Total_id") = $("#benif_id") + $("#Prime_id") but it's not work.
I was doing like this :
<script>
$("#total_id").text(parseFloat($("#benif_id").html()) + parseFloat($("#Prime_id").html()) + '$');
</script>
instead of
$("#total_id") = 17,455,561 $

You have to use .text() to get and set the value from/to the respective elements. You also have to convert the values to Number() before adding them. You also have to replace() the $ with empty string so that it no longer remains in the text.
var benif = $("#benif_id").text().replace('$', '');
var prime = $("#Prime_id").text().replace('$', '');
$("#Total_id").text(Number(benif) + Number(prime) + ' $');

Try this:
$("#total_id").text((
parseFloat($("#benif_id").html().split('.').join("")) +
parseFloat($("#Prime_id").html().split('.').join(""))) + '$')
removing the dots when parsing the number

Maybe what you're looking for:
var benif = $("#benif_id").text().replace(/[.\s$]/g, '');
var prime = $("#Prime_id").text().replace(/[.\s$]/g, '');
$("#Total_id").text((+benif + +prime) + ' $');

try this
$("#benif_id").html('11.578.351 $'); //11.578.351 $
$("#Prime_id").html('5.877.210 $'); //5.877.210 $
var Benif=$("#benif_id").html().replace(/\./g,'').replace('$','');
var Prime=$("#Prime_id").html().replace(/\./g,'').replace('$','');
var total=+Benif + + Prime;
//alert(total.toLocaleString())
$("#total_id").text(total.toLocaleString() + ' $');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="card text-center">
<div class="card-header">
<h5 >Prime</h5>
</div>
<div class="card-body">
<h2 id="Prime_id" class="card-title"></h2>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >Benif</h5>
</div>
<div class="card-body">
<h2 id="benif_id" class="card-title"></h2>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >total</h5>
</div>
<div class="card-body">
<h2 id="total_id" class="card-title"></h2>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

HTML javascript not able to destoy nth element by id - javascript

Related

How to know the selected card style and pass the value to the backend

Jquery search not working properly in accordion?

How to filter products using javascript?

Obtain different values depending on the selection criteria

how to do sum of two content html into jQuery script

Categories

Resources

Develop Reference

JavaScript is the programming language of the Web.

HTML javascript not able to destoy nth element by id - javascript

Related

How to know the selected card style and pass the value to the backend

Jquery search not working properly in accordion?

How to filter products using javascript?

Obtain different values ​depending on the selection criteria

how to do sum of two content html into jQuery script

Categories

Resources

Obtain different values depending on the selection criteria