I have the following html:
<div class="balance">
<div class="heading">
<p class="total"><span>00</span></p>
</div>
<div class="instance withdrawal">
<h3>Random</h3>
<p>desc</p>
<p class="amount">$350.<span>00</span></p>
</div>
<div class="instance deposit">
<h3>Added in</h3>
<p>desc</p>
<p class="amount">$1,250.<span>00</span></p>
</div>
<div class="instance withdrawal">
<h3>Bill</h3>
<p>desc</p>
<p class="amount">$50.<span>00</span></p>
</div>
</div>
<!--end wallet-container left-->
How can i use jQuery to add take total deposits, subtract the withdrawals and append it to the p.total?
Try this fiddle.
Edited to take floating points into account.
JS
$(function() {
var total = 0;
// Check each instance
$('.instance').each(function() {
var
$this = $(this),
clone = $this.find('.amount').clone(),
amount = 0,
floating = 0;
// Get floating point
floating = parseFloat('0.' + clone.find('span').text());
clone.find('span').remove();
// Get integer amount
amount = parseInt(clone.text().replace(/\D+/gim, ''), 10);
if (!isNaN(amount) && amount > 0) {
if ($this.is('.deposit')) total += (amount + floating); // Deposit
else if ($this.is('.withdrawal')) total -= (amount + floating); // Withdrawal
}
});
// Format total with commas
var formatted = ('' + parseInt(total, 10)).split('').reverse().join('');
formatted = formatted.replace(/(\d{3})/gim, '$1,');
formatted = formatted.split('').reverse();
if (formatted[0] == ',') formatted.shift();
formatted = formatted.join('');
$('.total').text('$' + parseInt(formatted, 10) + '.');
var decimal = (total - parseInt(total, 10)) * 100;
$('.total').append('<span>' + decimal + '</span>')
});
Try adjusting html slightly by placing $ character before first span element containing whole number including second sibling span element containing decimal number as descendants of .deposit , .withdrawal elements; utilizing data-* attribute to reference object containing withdrawal , deposit, total properties; Array.prototype.reduce() ; Number() ; String.prototype.replace() for comma , character ; .each()
var res = {
deposit: 0,
withdrawal: 0,
total: 0
};
function calculate(el) {
return el.get().reduce(function(a, b) {
return Number(a.textContent.replace(/,/g, "")) + Number(b.textContent)
})
}
$(".deposit, .withdrawal").each(function(i, el) {
res[$(el).data().type] += calculate($("span", el))
})
res.total = res.deposit - res.withdrawal;
$(".total span").html(res.total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="balance">
<div class="heading">
<p class="total" data-type="total"><span>00</span>
</p>
</div>
<div class="instance withdrawal" data-type="withdrawal">
<h3>Random</h3>
<p>desc</p>
<p class="amount">$<span>350</span><span>.00</span>
</p>
</div>
<div class="instance deposit" data-type="deposit">
<h3>Added in</h3>
<p>desc</p>
<p class="amount">$<span>1,250</span><span>.00</span>
</p>
</div>
<div class="instance withdrawal" data-type="withdrawal">
<h3>Bill</h3>
<p>desc</p>
<p class="amount">$<span>50</span><span>.00</span>
</p>
</div>
</div>
<!--end wallet-container left-->
Related
I am a novice and I have a page that displays job offers, I want to create a function that changes the logo of a company according to the company name mentionned in first 50 characters. The function below works only for the first element of a class. How can I make it work with all the class elements independently?
function logo_switch() {
let anonce = document.querySelector(".anonce").querySelector(".anonceText").innerHTML;
console.log(anonce);
let logo_A = anonce.indexOf('A');
let logo_B = anonce.indexOf('B');
let logo_C = anonce.indexOf('C');
let logo_D = anonce.indexOf('D');
let logo_E = anonce.indexOf('E');
let logo_F = anonce.indexOf('F');
let logo_G = anonce.indexOf('G');
var img = document.querySelector(".anonceLogo");
if ((logo_A > 0) && (logo_A < 50)) {
img.setAttribute("src", "img/a.png");
} else {
console.log(0);
};
if ((logo_B > 0) && (logo_B < 50)) {
img.setAttribute("src", "img/b.jpg");
} else {
console.log(0);
};
if ((logo_C > 0) && (logo_C < 50)) {
img.setAttribute("src", "img/c.jpg");
} else {
console.log(0);
};
if ((logo_D > 0) && (logo_D < 50)) {
img.setAttribute("src", "img/d.jpg");
} else {
console.log(0);
};
if ((logo_E > 0) && (logo_E < 50)) {
img.setAttribute("src", "img/e.jpg");
} else {
console.log(0);
};
if ((logo_F > 0) && (logo_F < 50)) {
img.setAttribute("src", "img/f.png");
} else {
console.log(0);
};
if ((logo_G > 0) && (logo_G < 50)) {
img.setAttribute("src", "img/g.png");
} else {
console.log(0);
};
};
<body onload="logo_switch()">
<div class="anonce">
<h2>Job 1</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
A
</p>
</div>
</div>
<div class="anonce">
<h2>Job 2</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
B
</p>
</div>
</div>
<div class="anonce">
<h2>Job 3</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
C
</p>
</div>
</div>
<div class="anonce">
<h2>Job 4</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
D
</p>
</div>
</div>
</body>
One approach is as below, with explanatory comments in the JavaScript:
const logo_switch = () => {
// using document.querySelectorAll() to retrieve all matching elements, along with
// and Array-literal and the spread operator to convert the iterable NodeList into
// an Array to provide access to Array methods:
let anonceTextElements = [...document.querySelectorAll(".anonceText")];
// the letters (or company names) you're looking for:
const logoLetters = ['A', 'B', 'c', 'D', 'E', 'F', 'G'];
// iterating over the anonceTextElements using Array.prototype.forEach()
// (note that this is entirely possible with NodeList.prototype.forEach(),
// but I use Array methods on this type of collection often enough - to
// filter, map, slice... - that I find it worth always converting to an
// Array for further modification, but that's purely my bias):
anonceTextElements.forEach(
// passing the current element (not the text, the element):
(elem) => {
// retrieve the text of the element, using String.prototype.trim() to
// remove leading and trailing white-space, and then trimming that to
// to the first 50 character with String.prototype.slice():
let text = elem.textContent.trim().slice(0, 50)
// using Array.prototype.filter() to filter the Array to keep only the
// relevant array-elements:
logoLetters
// we keep only the letters for which the provided assessment returns
// true/truthy values; here we're looking to see if the retrieved
// element text contains the current letter/company name:
.filter((letter) => text.includes(letter))
// the remaining elements are passed on to Array.prototype.forEach():
.forEach(
(matchedLetter) => {
elem
// here we navigate to closest ancestor element matching the '.anonce'
.closest('.anonce')
// from there we find the first of any elements matching the supplied
// 'img' selector, and update/set its src property using a template-
// literal, to interpolate the variable (matchedLetter) into the string:
.querySelector('img').src = `img/${matchedLetter}.png`;
});
});
}
logo_switch();
<div class="anonce">
<h2>Job 1</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
A
</p>
</div>
</div>
<div class="anonce">
<h2>Job 2</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
B
</p>
</div>
</div>
<div class="anonce">
<h2>Job 3</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
C
</p>
</div>
</div>
<div class="anonce">
<h2>Job 4</h2>
<div class="anonceBody">
<img class="anonceLogo">
<p class="anonceText">
D
</p>
</div>
</div>
References:
Array.prototype.forEach().
Array.prototype.filter().
Array.prototype.some().
document.querySelector().
document.querySelectorAll().
Element.closest().
Element.querySelector().
Element.querySelectorAll().
NodeList.prototype.forEach().
String.prototype.includes().
String.prototype.slice().
I'm looking to acquire a grand total of all product input field values that are dynamically generated when a user clicks on either the plus or minus button which, for that, adds the total price for each product.
Any help is greatly appreciated. This is what I have so far:
JS
$(function() {
$('.service_product-item').each(function() {
var thisEl = $(this),
btnPlus = thisEl.find('.service_btn-plus'),
btnMinus = thisEl.find('.service_btn-minus'),
fieldQtt = thisEl.find('input[name="service-qt1"],input[name="service-qt2"]'),
itemPriceEl = thisEl.find('.service_item-price'),
price = itemPriceEl.data('price');
// Add Products & Products Price
btnPlus.on('click', function() {
qttValue = parseInt(fieldQtt.val());
fieldQtt.val(qttValue + 1);
itemPriceEl.html('$' + (qttValue + 1) * price);
});
// Subtract Products & Products Price
btnMinus.on('click', function() {
qttValue = parseInt(fieldQtt.val()) - 1;
var newQTT = (qttValue <= 0) ? 0 : qttValue;
fieldQtt.val(newQTT);
itemPriceEl.html('$' + newQTT * price);
});
});
});
HTML
<div class="service_products_and_services_wrapper">
<div class="service_product-items">
<div class="service_product-item">
<div class="service_item-wrap">
<img src="http://www.kinyu-z.net/data/wallpapers/27/796765.png" alt="QT1" title="" />
<div class="service_wrap-qtt">
<div class="service_wrap-qtt-field-qtt">
<input class="service_field-qtt" name="service-qt1" value="0" readonly="" />
</div>
<div class="service_wrap-qtt-minus-plus">
<div class="service_btn-cart-qtt service_btn-plus">+</div>
<div class="service_btn-cart-qtt service_btn-minus">-</div>
</div>
</div>
</div>
<div class="service_item-info">
<div class="service_item-title">QT1<br>
<span style="font-size: .7em; text-transform: none;">($5 per item)</span>
</div>
<div class="service_item-price" data-price="5">$0</div>
</div>
</div>
<div class="service_product-item">
<div class="service_item-wrap">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIuVn6ZXHwQiFC0IlB1N_CxbXo6-5x1A4yqspYsxUUb0Xjmu8L" alt="QT2" title="" />
<div class="service_wrap-qtt">
<div class="service_wrap-qtt-field-qtt">
<input class="service_field-qtt" name="service-qt2" value="0" readonly="" />
</div>
<div class="service_wrap-qtt-minus-plus">
<div class="service_btn-cart-qtt service_btn-plus">+</div>
<div class="service_btn-cart-qtt service_btn-minus">-</div>
</div>
</div>
</div>
<div class="service_item-info">
<div class="service_item-title">QT2<br>
<span style="font-size: .7em; text-transform: none;">($10 per item)</span>
</div>
<div class="service_item-price" data-price="10">$0</div>
</div>
</div>
</div>
<p style="margin-top: 40px;">Grand Total: $0</p>
</div>
and here is a DEMO
There are some issues with the problem statement. Main one is that you don't really have any model defined for your application and your html acts as a data model as well, and important data is scoped to the event handlers. Also it is not clear what is the initial state of that application. So I just modify your code a bit.
One simple approach just to show how it could be done is following:
have a global total
with each minus and plus update the value accordingly
https://jsfiddle.net/Lyxceu3s/43/
var total = 0;
$(function() {
$('.service_product-item').each(function() {
var thisEl = $(this),
btnPlus = thisEl.find('.service_btn-plus'),
btnMinus = thisEl.find('.service_btn-minus'),
fieldQtt = thisEl.find('input[name="service-qt1"],input[name="service-qt2"]'),
itemPriceEl = thisEl.find('.service_item-price'),
price = itemPriceEl.data('price');
// Add Products & Products Price
btnPlus.on('click', function() {
qttValue = parseInt(fieldQtt.val());
fieldQtt.val(qttValue + 1);
total = total + price;
itemPriceEl.html('$' + (qttValue + 1) * price);
$('#idGT').html(total);
});
// Subtract Products & Products Price
btnMinus.on('click', function() {
qttValue = parseInt(fieldQtt.val()) - 1;
if(qttValue >= 0){
total = total - price;
}
var newQTT = (qttValue <= 0) ? 0 : qttValue;
fieldQtt.val(newQTT);
itemPriceEl.html('$' + newQTT * price);
$('#idGT').html(total);
});
});
});
And that would also require a little modification to your html:
<p style="margin-top: 40px;">Grand Total: $<span id="idGT">0</span></p>
Note: that in case of a minus, you have to check that quantity is above or 0 before you conditionally reset it to 0.
As a general note, you might want to separate your models from your views. Check the following SO thread for a digest: "Hello World" in MVC Pattern
Updated the fiddle. Made few changes to it
Please take a look at it and let me know if thats what you are looking for.
https://jsfiddle.net/Lyxceu3s/35/
var firstTotal = $('input[name="service-qt2"]').val() * 10 ;
var secondTotal = $('input[name="service-qt1"]').val() * 5;
$('#grandTotal').html(firstTotal + secondTotal)
I have some divs that have values. I want to sum in one <h3>
The probem in my code is that I get the last div value and cannot sum the other.
Html code:
<div class="cart-footer">
<div class="order-tools">
<h3 id="total">
</h3>
</div>
<div class="cash-out">
</div>
</div>
Jquery:
var sum = 0;
$('#item-total').each(function(){
var val = $.trim($(this).text());
if (val) {
val = parseFloat(val.replace(/^\$/, ""));
sum += !isNaN(val) ? val : 0;
}
});
$("#total").html(sum + "$");
You can see #item-total in this code:
$(".cart-body").append(function(){
return "<div id='cart-list'><div class='product-name'>"+personObject.name+"</div><div class='product-tools'><input type='number' data-id='1' value='1' min='1'></input><label id='price'>Price: "+personObject.price+"</label><label data-value='"+personObject.count * personObject.price+"' id='item-total'>"+personObject.count * personObject.price+"</label></div></div>";
});
You are dealing with a logic error in your code. What you are doing incorrectly is looping through $('#item-total'). This is wrong because #item-total is selecting a single unique HTML element.
What you want to do is loop through all the elements using a different selector. For example by replacing in your HTML: <h3 id="total"> into <h3 class="total">.
Now in your JQuery, selecting $('.total') would then select all instances of .total tagged HTML elements.
var items = $('.item'),
cashOut = $('#cash-out'),
sum = 0;
$.each(items, function(value) {
// items[value] will contain an HTML element, representing an 'item'.
var itemValue = parseFloat(items[value].innerHTML);
sum += !isNaN(itemValue) ? itemValue : 0;
});
cashOut.html('Total: $' + sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-footer">
<div class="order-tools">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
<div id="cash-out">0</div>
$(document).ready(function(){
var a = document.getElementById("mrp4");
var b = document.getElementById("mrp2");
document.getElementsByClassName("dis").innerHTML = ((b.innerHTML*100)/a.innerHTML);
}
I'm trying to figure out the percentage between amount of my two multiple products. I've used JavaScript to increase amount with the quantity selected now. Can I add class to my same divs or can I go with id's as id'd will be same only class is in loop?
<div id= "mrp4">200 </div>
<div id= "mrp2">100 </div> <div id= "mrp2">120 </div>
<div class= "dis">50 </div>
<div class= "dis">40 </div>
Here I've cleaned it up a little bit too.
(function() {
var a = parseInt(document.getElementById("mrp4").innerHTML, 10);
var b = parseInt(document.getElementById("mrp2").innerHTML, 10);
var perc = (b * 100 / a);
console.log(a, b)
document.getElementById("dis").innerHTML = "% " + perc;
})();
<div id="mrp4">200</div>
<div id="mrp2">100</div>
<div id="dis"></div>
I've the following code to calculate the percentage of each element (like poll voting system):
$(document).ready(function() {
$("#percentage").click(function() {
var number, sumNumbers = 0, newPercent;
$(".item").each(function() {
number = $(this).children(".itemNum").text();
number = +number;
sumNumbers += number;
if(sumNumbers != 0) {
newPercent = (number / sumNumbers) * 100;
} else {
newPercent = 0;
}
$(this).children(".percentage").text(newPercent+"%");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<span class="itemNum">0</span> <span class="percentage"></span>
</div>
<div class="item">
<span class="itemNum">2</span> <span class="percentage"></span>
</div>
<div class="item">
<span class="itemNum">1</span> <span class="percentage"></span>
</div>
<button id="percentage">Calculate Percentage!</button>
But, the result is:
0 0%
2 100%
1 33.33333333333333%
So, how to calculate return the following result?
0 0%
2 66.66666666666667%
1 33.33333333333333%
I need these results to do a progress bar on my poll system, so, how to do this?
You need to parse the text to integer via parseInt() function.
And you need first to sum numbers and then you can calculate percentage.
For one loop question:
You can't count percentage in one loop. Explained here
$(document).ready(function() {
$("#percentage").click(function() {
var number, sumNumbers = 0, newPercent;
$(".item").each(function(){
number = $(this).children(".itemNum").text();
sumNumbers += parseInt(number);
});
$(".item").each(function() {
number = parseInt($(this).children(".itemNum").text());
if(sumNumbers != 0) {
newPercent = (number / sumNumbers) * 100;
} else {
newPercent = 0;
}
$(this).children(".percentage").text(newPercent+"%");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<span class="itemNum">0</span> <span class="percentage"></span>
</div>
<div class="item">
<span class="itemNum">2</span> <span class="percentage"></span>
</div>
<div class="item">
<span class="itemNum">1</span> <span class="percentage"></span>
</div>
<button id="percentage">Calculate Percentage!</button>