how to do sum of two content html into jQuery script - javascript

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>

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>

HTML javascript not able to destoy nth element by id

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";
};

Count items get from php in jQuery

I am beginner web developer.
My code retrieves data from php and dynamically displays it on the page.
This code get data from php.
I have this code:
let productCount = 0;
function loadProducts() {
$.ajax({
type: 'GET',
url: '/pobierz-produkt',
dataType: "text",
data: {
slug: slug,
queryString: queryString,
filterDrawer: $(".filter-drawer option:selected").val(),
filterMounting: $(".filter-mounting option:selected").val(),
filtershelfs: $(".filter-shelfs option:selected").val()
},
success: function (data) {
$('.dynamic-products').html(data);
let productCount = 5;
if (productCount == 1) $('.dynamic-products-count').html('5 produktów');
if (productCount >= 2 && productCount <= 5) $('.dynamic-products-count').html(productCount + ' produkty');
else $('.dynamic-products-count').html(productCount + ' produktów');
}
});
}
It's work fine.
This code return me:
<div class="product-card">
<div class="mt-5 w-100">
<div class="w-100 mb-3 product-card-img-box text-center text-md-left">
<a href="http://name.test/produkt/produkt-1">
<img src="http://name.test/upload/products/thumbs3/559c3b396bca9c33e6dcc32ad36bc732.jpeg" class="img-fluid">
</a>
</div>
<div class="product-card-name-box text-center text-md-left">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-3">
Produkt 1 tv blue
</div>
</div>
<div class="product-card-category text-center text-md-left">mini opis
</div>
</div>
</div>
<div class="product-card">
<div class="mt-5 w-100">
<div class="w-100 mb-3 product-card-img-box text-center text-md-left">
<a href="http://name.test/produkt/produkt-2">
<img src="http://name.test/upload/products/thumbs3/38ae98e033d9c2dddc7b2ca7fff9acd4.jpeg" class="img-fluid">
</a>
</div>
<div class="product-card-name-box text-center text-md-left">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-3">
Produkt 2
</div>
</div>
<div class="product-card-category text-center text-md-left">
</div>
</div>
</div>
<div class="product-card">
<div class="mt-5 w-100">
<div class="w-100 mb-3 product-card-img-box text-center text-md-left">
<a href="http://name.test/produkt/szafka-z-szufladami">
</a>
</div>
<div class="product-card-name-box text-center text-md-left">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-3">
Szafka z szufladami
</div>
</div>
<div class="product-card-category text-center text-md-left">
</div>
</div>
</div>
I need save to productCount how many "product-card" was returned from php.
How can I make it? I need count "product-card"
Please help me

If your data is pure HTML returned, you can use :
success: function (data) {
// create fake div
var $data = $('<div />').html(data);
var count = $data.find('.product-card').length;
}
Here is a fiddle : https://jsfiddle.net/hfwuznvd/

You can count the length of JSON objects using Object.keys(myObject).length;
var myObject = {'name':'Kasun', 'address':'columbo','age': '29'}
var count = Object.keys(myObject).length;
console.log(count);

The JS code fails to execute (or do anything) when I click the submit button

I'm just learning Javascript, and this is my first attempt to make something for myself, so forgive me if the solution is very simple. I'm trying to automate score keeping for a card game. When I click the submit button, nothing happens.
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne">
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber">
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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="golf.js"></script>
And the javascript:
var round = 0;
var scoreShayne = 0;
var scoreAmber = 0;
function tallyScore() {
round += 1;
document.getElementById(round).innerHTML = "Round: " + round;
scoreShayne += document.getElementById("inputShayne").value;
scoreAmber += document.getElementById("inputAmber").value;
document.getElementById(shayne).innerHTML = scoreShayne;
document.getElementById(amber).innerHTML = scoreAmber;
}

some recommandations in this code, just to see ;)
// global values
var round = 0
, scoreShayne = 0
, scoreAmber = 0
;
// use constants to prevent the JS interpreter from recalculating each call
const hmi_round = document.getElementById('round')
, hmi_shayne = document.getElementById('shayne')
, hmi_amber = document.getElementById('amber')
, hmi_inputShayne = document.getElementById('inputShayne')
, hmi_inputAmber = document.getElementById('inputAmber')
;
function tallyScore()
{
hmi_round.textContent = "Round: " + ++round; // ++round is a direct increment (different from round++ )
hmi_shayne.textContent = scoreShayne += hmi_inputShayne.valueAsNumber; // HTML5 as valueAsNumber
hmi_amber.textContent = scoreAmber += hmi_inputAmber.valueAsNumber; // instead of parseInt(hmi_inputAmber.value)
hmi_inputShayne.value = "0"; // reset values for the next round
hmi_inputAmber.value = "0";
}
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne" type="number"min="0" value="0"> <!-- don't forget to set the type -->
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber" type="number" min="0" value="0"> <!-- don't forget to set the type -->
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>

Categories

Resources