I'm not very good at this and have tried last few days searching up and down for any kind of answer to help solve my problem. I've only pieced together the below. I would like to grab the generated span class value, / by 12, round up to the nearest penny and than display elsewhere on the same webpage. Any help would be greatly appreciated and thank you in advance.
const price = document.getElementsByClassName('price-value')[0].innerHTML; // Price of item before tax
// Calculate total after tax to two decimal places
let totalPrice = price / 12;
totalPrice.toFixed(2);
document.getElementById("demo").innerHTML =totalPrice
<span class="price-value model-price-value-sale">
$1,349.95
</span>
<p id="demo"></p>
First you need to convert the price from currency to an actual number by:
Number(price.replace(/[^0-9\.-]+/g,""))
Then use the Math.ceil() function to round up.
So it will be like that:
const price = document.getElementsByClassName('price-value')[0].innerHTML; // Price of item before tax
// Calculate total after tax to two decimal places
//let totalPrice = Math.ceil(Number(price.replace(/[^0-9\.-]+/g,"")) / 12);
let totalPrice = Math.round((Number(price.replace(/[^0-9\.-]+/g,"")) / 12)* 100)/100;
document.getElementById("demo").innerHTML =totalPrice
<span class="price-value model-price-value-sale">
$1,349.95
</span>
<p id="demo"></p>
Related
I'm new to Laravel, hence unable to achieve the desired result. I'm trying to get the total of each item based on their quantities provided by the user, I'm only getting the total for the first item total when quantity given but not for all items. Any help would be appreciated!
this is the image of my ordersPage
below is HTML code:
<p>Quantity:
<input type="number" onchange="totalAmount()" class="item_quantity" id="item_quantity"
name="item_quantity">
</p>
<p>Item Price: AED - </p>
<p type="number" id="item_cost" name="item_cost" class="mb-15">
{{ $lnkditem->item_cost}}
</p>
<p>Total Amount: AED - <strong style="color: red"></strong>
<strong> <span style="color: red" id="total"></span></strong>
</p>
below is JS code:
function totalAmount(){
var quantity = Number(document.getElementById('item_quantity').value);
var itemCost = Number(document.getElementById('item_cost').innerHTML);
var total = quantity * itemCost;
document.getElementById('total').innerHTML = total;
console.log(quantity);
That's because your using ID to set the total value.
You should use classes to do that.
Set the class of total span to 'total'
Import jquery and do that in this way:
First step : remove id's and just use class instead of id;
Step 2:insert this part of code in the script part of your page:
$(document).on('change','.item_quantity',function(e){
var quantity = $(this)
var itemcost = quantity.parent().next().next():
var total = parseFloat(itemcost.html()) * quantity.val();
var total_element = itemcost.next().children('.total');
total_element.html(total);
});
In my document I have a table cell labeled P/L which is calculated by:
P/L = Sell price * Sell Quantity – Buy price * Buy Quantity
You can see I have started by using some multiplication on my repeating cell item like so
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.TxnId.length; i++){
var product = $scope.TxnId[i];
total += (product.Price * product.Quantity);
}
return total;
};
The problem is I'm wondering how do I select the sell price and sell quantity? If I can select the sell price and buy price as well at the sell price and quantity I think I can get this to work. Any ideas?
You can also see I am using sort by for the buy and sell data which loads in also.
Use the output to compute profit and loss for each sell transaction based on the First in First out for Pineapples.
http://plnkr.co/edit/XfRbKe7bNOBn8rGskGyW?p=preview
below is a picture of what it should look like, I struggling to figure out the P/L column.
I have an assignment that i need to do however I am not able to get in touch with my teacher for the next 3 days cuz of a holiday. It needs to be finished before I go back. I am NOT an expert nor anywhere near one in javascript. I am taking classes and we arent all the way finished talking about this assignment but my teacher always gives extra credit to those who can figure out a problem before we finish talking about it.
-INSTRUCTIONS-
You will need to create some variables
and functions to calculate the total cost for individual
pizza orders and calculate the Grand Total for all orders.
Use the following values for the calculations:
A large pizza costs $10
The Tax Rate is 8.25%
The delivery tip is outlined below by the customer
Use the random() method to generate the range of tip % paid by the customer, where indicated.
Format all amounts to 2 decimal places
Customer 1 orders 5 large pizza's and pays a 10% delivery tip
Customer 2 orders a random number of pizza's (between 1–25) and pays a random
delivery tip (between (0%-25%)
Simple Pizza Order!
var grandTotal = 0;
var pizzaCost = 10;
var taxRate = .0825;
var tipRate = .10;
quantity = 5;
var subTotal = pizzaCost * quantity
var tipAmount = subTotal * taxRate
var taxAmount = subTotal * taxRate
var total = subTotal + tipAmount + taxAmount
grandTotal + = total;
This is what i have so far. How do i make costumer 1's order show up on the page with the calculations and all that? I got this far but the rest is stumped me.
any help will be appreciated thanks in advance.
function Calculate() {
var pizzaCost = Number(document.getElementById('PizzaCost').value);
var tax = Number(document.getElementById('TaxRate').value);
var tip = document.getElementById('Tip').value;
tip = Number((tip.substring(0, tip.length - 1)));
var result = pizzaCost + (pizzaCost * tax) + (pizzaCost * (tip / 100));
console.log({
pizzaCost: pizzaCost,
tax: tax,
tip: tip,
total: result
});
}
function GenerateTip() {
document.getElementById('Tip').value = (Math.floor((Math.random() * 50) + 1) + "%");
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1>Simple Pizza Order</h1>
</div>
<div>
<p>Pizza Cost:
<input type="text" id="PizzaCost">
</p>
<p>Tax Rate:
<input type="text" id="TaxRate">
</p>
<p>Delivery Tip:
<input type="text" id="Tip">
<input type="button" value="Generate Tip" onClick="GenerateTip();">
</p>
<p>
<input type="button" value="Calculate" onClick="Calculate();">
</p>
<p id="result"></p>
</div>
<script>
</script>
</body>
</html>
I have 2 div's.
One is SHIPPING and another is TOTAL PRICE.
<div id="tt_shipping_rate_basket">$0.00</div> = SHIPPING
<div class="op_col5_3" align="right" id="tt_total_basket">$897.00</div> = TOTAL PRICE
Also there are 4 inputs for SHIPPING, each adds it's own price in the shipping div..
for example:
input 1 = 10$
input 2 = 20$
so when choosing an input the value in the #tt_shipping_rate_basket is changing ajax to the value of the input... this works great...
The problem is, I do not want 2 divs (one for shipping and one for total price)...
I just want ONE div, called Total Price, and when I choose an input, the value should ADD&CHANGE to the #tt_total_basket instead of tt_shipping_rate_basket...
What I'm trying to do is, GET the value of SHIPPING field (which is ajax populated), GET the value of TOTAL PRICE field, then just ADD shipping to Total Price...
here is what I tried to write but it doesn't seem to work, sorry I'm not to good at programming..
function plus() {
var spTotal = document.getElementById("tt_total_basket");
var spShip = document.getElementById("tt_shipping_rate_basket");
spTotal = spTotal.innerHTML = +spShip;
}
spTotal is the TOTAL PRICE
spShip is the Shipping Price
The result should be (spTotal = spTotal.value + spShip.value)..
Can somebody please help?
Untested, but you get the idea:
var spTotal = document.getElementById("tt_total_basket").innerHTML.replace('$', '');
var spShip = document.getElementById("tt_shipping_rate_basket").innerHTML.replace('$', '');
spTotal = parseFloat(spTotal) + parseFloat(spShip);
Ive got a document and when the user enters something into one input I need to show a response in a second input box. I can get the user given value, i can process it, but when I try to set the second input box with the result I get the error $.field is null. Here is the code:
$('places').addEvent('keyup', function(){
var places = $('places').value;
alert("PLACE: "+places);
var price = values[places];
var nights = $('nights').value.toInt();
alert("NIGHTS: "+nights);
var total = price * nights;
alert("TOTAL: "+total);
$('pricepernight').set('text', total);
$('pricetotal').set('text', total - ((total / 100) * 21));
});
So I get the place value. I pull the price of the place out of an assoc array. I then multiple that price by the amount of nights field in by the user and this is then my total amount. It is this amount that I cannot set to. Note that the alert shows the correct amount.
and the html looks like this
<div class='block'>
<input type="text" id="places" />
</div>
<div class='block'>
<label for="nachten">Aantal nachten</label>
<input type="text" id="nights" />
</div>
<div class='block long'>
<span class='label'>Prijs per slaapplaats per nacht</span>
<input type="text" class='resultfield' id='pricepernight' />
</div>
<div class='block last'>
<span class='label'>Totaalprijs excl. btw</span>
<input type="text" class='resultfield' id='pricetotal'/>
</div>
Firebug responds:
String contains an invalid character
[Break On This Error]
...x:\'4W\',3X:18.1l,al:18.1l,1Q:18.1l,as:18.1l,8S:18.1l,1F:O,3E:{x:\'1u\',y:\'1o\'...
Any ideas/suggestions anyone? Thank you in advance!
right. you seem to have used a mix of mootools and jquery code.
$('nights').addEvent('keyup', function(){
var places = $('places').value;
var price = values[places];
var nights = $('nights').value;
var total = price * nights;
alert(total);
$('#pricepernight').val(total);
//$('#pricetotal').val(total - ((total / 100) * 21));
});
in mootools 1.2+, this should be:
$('nights').addEvent('keyup', function(){
var places = $('places').get('value');
var price = values[places];
var nights = $('nights').get('value');
var total = price * nights;
alert(total);
$('pricepernight').set('value', total);
//$('#pricetotal').val(total - ((total / 100) * 21));
});
there's an implied global array values. also, this is not very safe as nights may not be integer.
the point is. #id -> id and .val() -> set('value', 'newvalue') - or .get('value')
There are couple of minor mistakes here.
First, you should use # sign to select based on your id attributes
like places and nights
Check http://api.jquery.com/id-selector/
Second, use val() to read the value from the html controls rather
than value
Check http://api.jquery.com/val/
try this
$('#nights').keyup(function(){
var places = $('#places').val();
var price = values[places];
var nights = $('#nights').val();
var total = parseInt(price) * parseInt(nights);
alert(total);
$('#pricepernight').val(total);
//$('#pricetotal').val(total - ((total / 100) * 21));
});
and what is values[places]?