I'm building a financing calculator and all of the numbers being outputted to the DOM are in the thousands.
I currently am using .toLocaleString() on one number in my code, and it works (the main productPrice number). I used .toLocatelString() when outputting to the DOM.
However, I can't seem to figure out why when using the same way, it doesn't work on the other numbers. Specifically, the Down Payment, Total and Per Month numbers.
Here's the JS code (the code I've entered .toLocaleString() is at the very bottom):
"use strict";
// Define product price / tax
const productPrice = 105000;
const tax = 0.13;
// Append product price to DOM
const productPriceID = document.getElementById("product-price");
productPriceID.innerHTML = productPrice.toLocaleString();
// Grab the id's of the main product price, down payment, total, per month and button for DOM appending
const downPaymentValue = document.getElementById("down-payment-value");
const totalValue = document.getElementById("total-value");
const perMonthValue = document.getElementById("per-month-value");
const calculateBtn = document.getElementById("calculate");
///////// Calculations
calculateBtn.addEventListener("click", calculate);
function calculate() {
// Grab the value of the month selected
const monthSelected = document.querySelector('input[name="month"]:checked')
.value;
// Grab the value of the down payment percentage selected
const percentageSelected = document.querySelector(
'input[name="percent"]:checked'
).value;
// Calculate down payment percentage based on main price
const totalDownPayment = (productPrice * percentageSelected).toFixed(2);
// Calculate the total
const totalPrice = (productPrice - totalDownPayment).toFixed(2);
// Calculate the per month
const perMonth = (totalPrice / monthSelected).toFixed(2);
// Append down payment to DOM
downPaymentValue.innerHTML =
"<sup>$</sup>" + totalDownPayment.toLocaleString();
downPaymentValue.parentNode.appendChild(downPaymentValue);
// Append total to DOM
totalValue.innerHTML = "<sup>$</sup>" + totalPrice.toLocaleString();
totalValue.parentNode.appendChild(totalValue);
// Append per month to DOM
perMonthValue.innerHTML = "<sup>$</sup>" + perMonth.toLocaleString();
perMonthValue.parentNode.appendChild(perMonthValue);
}
Any idea? Thanks in advance.
It is because your other numbers are being converted to string via toFixed. So toLocaleString does not do anything.
Do all of your math in numbers and convert to strings at the end.
const totalDownPayment = (productPrice * percentageSelected);
const totalPrice = (productPrice - totalDownPayment);
const perMonth = (totalPrice / monthSelected);
convert to text with options argument to specify number of decimals:
const totalDownPaymentStr = totalDownPayment.toLocaleString(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
const totalPriceStr = totalPrice.toLocaleString(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
// ...
See MDN documentation for more information about the options argument.
Related
JavaScript newbie here.
I am tasked with calculating a user's monthly payment by using a given equation. I am having trouble with getting the values from the user.
const loanAmount = document.getElementById('loan-amount');
const loanYears = document.getElementById('loan-years');
const loanRate = document.getElementById('loan-Rate');
const span = document.querySelector('span');
const form = document.getElementById("calc-form");
form.addEventListener("submit", function (e) {
e.preventDefault();
console.log('hello')
makeLogo();
});
function makeLogo(loanAmount, loanYears, loanRate) {
const principle = loanAmount.value
const n = loanYears.value * 12;
const i = loanRate.value / 12;
const monthylPayment = (principle* i)/1-(1+ i)** -(n);
span.innerText = monthylPayment;
}
This is what I have so far and am getting an error for the variables in the makeLogo function.
It's a good idea to separate your inputs, calculations and rendering into separate functions. try to keep functions as simple as possible.
You will need to re-evaluate your monthly cost calculator, but here is a working example which takes input, calculates and then renders into form fields.
document.getElementById("calc-form").addEventListener('submit', (e) => {
e.preventDefault();
var loanAmount = document.getElementById('loan-amount').value;
console.log(loanAmount);
var loanYears = document.getElementById('loan-years').value;
var loanRate = document.getElementById('loan-rate').value;
var monthlyPayment = makeLogo( loanAmount, loanYears, loanRate );
console.log(monthlyPayment);
// the monthly has now been calculated, simply put it where you'd like
var calculated = document.getElementById('calculated');
calculated.value = monthlyPayment;
var totalRepayment = document.getElementById('totalRepayment');
totalRepayment.value = monthlyPayment * ( loanYears * 12 );
} );
function makeLogo( principle, loanYears, loanRate) {
var n = loanYears * 12;
var i = loanRate / 12;
var result = ( principle * i) / 1 - ( 1 + i )**-( n );
return result;
}
<html>
<form action='submit' id ='calc-form'>
Loan Amount:<input id ='loan-amount'></input><BR/>
Loan Years:<input id='loan-years'></input><BR/>
Loan Rate:<input id='loan-rate'></input><BR/>
<input type='submit'>
</form>
<span id='span-output'>
Monthly Payment :<input id='calculated' readonly><BR/>
Total Re-Payment :<input id='totalRepayment' readonly>
</span>
</html>
The error you are seeing is likely because the makeLogo function is trying to access the value property of the loanAmount, loanYears, and loanRate variables. Still, they are DOM elements and not their values.
You can fix this by accessing the value property of the DOM elements before passing them to the function like so:
form.addEventListener("submit", function (e) {
e.preventDefault();
console.log('hello')
const principle = loanAmount.value;
const n = loanYears.value * 12;
const i = loanRate.value / 12;
makeLogo(principle, n, i);
});
function makeLogo(principle, n, i) {
const monthylPayment = (principle* i)/1-(1+ i)** -(n);
span.innerText = monthylPayment;
}
This way, the makeLogo function receives the values of the input fields as arguments and can perform the calculation correctly.
Also, make sure that you are getting the right input from the user by checking the value of each element by doing the following:
console.log(loanAmount.value,loanYears.value,loanRate.value)
and check if they are the values that you are expecting.
Here is a link to the tip calculator - it's hosted on netlify.
I created a tip calculator using html, scss, javascript. no tutorials used, so I'm pretty proud. It took me waaayyyyy longer than I had planned on, but it's done. needless to say, I am a complete beginner.
In any event, I need some help.
I need to know how to make the numbers auto-update if I input a new dollar amount into the billing input.
For instance, if the bill is $50, and the tip percent is 50% that's a $25 tip Amount. for a total bill of $75 dollars.
But let's say I mistyped the bill, so I go back to put in $60, 50% of $60 is $30. so the total bill amount should auto-update to $90. But I can't figure out how to get all of that to happen instantaneously when I change the dollar amount in the billing input.
I have a feeling that it has something to do with using a "change" event listener. but I don't understand how to best implement it, or if that's even the answer here.
// Upper Box Selections
const tipPercent = document.querySelector(".tip-percent");
const tipSlider = document.querySelector("#tip-slider");
tipSlider.oninput = function () {
billInput = Number(document.querySelector("#bill-amt").value);
tipPercent.innerHTML = this.value + "%";
//Discovered that number input type still returns a string
//You can wrap multiple variables in parenthesis in order to append methods
let tipAmount = document.querySelector(".tip-amount");
// if a variable is referenced but not defined, it will be added to the window element - can now use in second function
tipTotal = Number((billInput * Number(this.value / 100)).toFixed(2));
tipAmount.innerHTML = "$" + tipTotal.toFixed(2);
const billTotal = document.querySelector(".bill-total");
billForSplit = Number(billInput + tipTotal).toFixed(2);
billTotal.innerHTML =
"<strong>$</strong>" + "<strong>" + billForSplit + "</strong>";
};
// Bottom Box Selections
// -Grab slider value
const splitSlider = document.querySelector("#split-slider");
splitSlider.oninput = function () {
// -Grab split person value-split PERSON for 1, people for more than 1
const splitPeople = document.querySelector(".split-people");
if (splitSlider.value <= 1) {
splitPeople.innerHTML = splitSlider.value + " person";
} else {
splitPeople.innerHTML = splitSlider.value + " people";
}
// -grab tip per person value
const splitTip = document.querySelector(".split-tip");
// -grab total bill per person value
const splitTotal = document.querySelector(".split-total");
// - tip per person equals tipTotal / split slider value
splitTip.innerHTML = "$" + (tipTotal / splitSlider.value).toFixed(2);
// -total bill/person = billTotal / splitSlider.value
splitTotal.innerHTML =
"<strong>$</strong>" +
"<strong>" +
(billForSplit / splitSlider.value).toFixed(2) +
"</strong>";
};
https://wonderful-meninsky-e0b1c7.netlify.app/
You should declare the function with a name like calcTotal() which will be run every time there is an input for the bill and tip:
const tipPercent = document.querySelector(".tip-percent");
const tipSlider = document.querySelector("#tip-slider");
function calcTotal() {
billInput = Number(document.querySelector("#bill-amt").value);
tipPercent.innerHTML = this.value + "%";
//Discovered that number input type still returns a string
//You can wrap multiple variables in parenthesis in order to append methods
let tipAmount = document.querySelector(".tip-amount");
// if a variable is referenced but not defined, it will be added to the window element - can now use in second function
tipTotal = Number((billInput * Number(this.value / 100)).toFixed(2));
tipAmount.innerHTML = "$" + tipTotal.toFixed(2);
const billTotal = document.querySelector(".bill-total");
billForSplit = Number(billInput + tipTotal).toFixed(2);
billTotal.innerHTML =
"<strong>$</strong>" + "<strong>" + billForSplit + "</strong>";
};
tipSlider.oninput = calcTotal;
document.querySelector("#bill-amt").oninput = calcTotal;
I built a financing calculator, and I have pre-checked values in the HTML. Once is for a 60 month financing term, and the other is for a 10% down payment.
Link to CodeSandbox.
When the page loads up, the calculator hasn't calculated the values yet because in order to do so, the user has to select values and then hit Calculate.
Is there a way for one page load, to load up the total calculated values for the selected values of 60 and 10%?
Thank you in advance!
index.js
// Define product price
const productPrice = 105000;
// Append product price to DOM
const productPriceID = document.getElementById("product-price");
productPriceID.innerHTML = productPrice.toLocaleString();
// Grab the id's of the main product price, down payment, total, per month and button for DOM appending
const downPaymentValue = document.getElementById("down-payment-value");
const totalValue = document.getElementById("total-value");
const perMonthValue = document.getElementById("per-month-value");
const calculateBtn = document.getElementById("calculate");
///////// Calculations
calculateBtn.addEventListener("click", calculate);
function calculate() {
// Grab the value of the month selected
const monthSelected = document.querySelector('input[name="month"]:checked')
.value;
// Grab the value of the down payment percentage selected
const percentageSelected = document.querySelector(
'input[name="percent"]:checked'
).value;
// Calculate down payment percentage based on main price
const totalDownPayment = productPrice * percentageSelected;
// Calculate the total
const totalPrice = productPrice - totalDownPayment;
// Calculate the per month
const perMonth = totalPrice / monthSelected;
// Convert to text with options argument to specify number of decimals
const totalDownPaymentStr = totalDownPayment.toLocaleString(
navigator.language,
{ minimumFractionDigits: 2, maximumFractionDigits: 2 }
);
const totalPriceStr = totalPrice.toLocaleString(navigator.language, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const perMonthStr = perMonth.toLocaleString(navigator.language, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
// Append down payment to DOM
downPaymentValue.innerHTML =
"<sup>$</sup>" + totalDownPaymentStr.toLocaleString();
downPaymentValue.parentNode.appendChild(downPaymentValue);
// Append total to DOM
totalValue.innerHTML = "<sup>$</sup>" + totalPriceStr.toLocaleString();
totalValue.parentNode.appendChild(totalValue);
// Append per month to DOM
perMonthValue.innerHTML = "<sup>$</sup>" + perMonthStr.toLocaleString();
perMonthValue.parentNode.appendChild(perMonthValue);
}
///////// Accessibility
// Grab all labels
const allLabels = document.querySelectorAll("label");
// On enter, select only the ones that are selected
allLabels.forEach(label => label.addEventListener("keyup", onEnter));
function onEnter(e) {
e.preventDefault();
if (e.keyCode === 13) {
this.click();
}
}
You can just call the 'calculate()' function after defining the global variables as 60% and 10% values are pre-checked.
Link to CodeSandbox
Add this line right before calculate function:
window.onload = calculate();
I have a section on my website to display a live price estimates based on a value inputted. I just have have one final bit of formula to add but I'm unsure how to modify the code, I need to introduce a minimum for the variable part of the price (5% of the inputted value or 2, whichever is greater. For example:
If(curValFloat * 0.05 > 2, curValFloat * 0.05, 2) + 4
Here's the code that's in use now:
var elDeliveryPrice = document.getElementById('deliveryPrice');
var elOrderValue = document.getElementById('orderValue');
var formatter = new Intl.NumberFormat('gb-GB', { style: 'currency', currency: 'GBP' });
elOrderValue.addEventListener('keyup', _ => {
let curVal = elOrderValue.value;
let curValFloat = parseFloat(curVal);
if (isNaN(curValFloat)) {
elDeliveryPrice.innerHTML = '';
return;
}
elDeliveryPrice.innerHTML = formatter.format((curValFloat * 0.05) + 4);
});
Posting this as an answer since stuff in comments gets lost sometimes.
You can use Math#max, which returns the maximum of numbers passed to it.
Math.max(curValFloat * 0.05, 2)
I have a small "problem". I try to do a Loop-for for a
"getElementsByName" for each rows in the table.
I try to loop a few values.
Price * Quantity * discount * tax (select.options) = MY Final price after discout.
AD: (You have to open Full View)
For a single line it works great by getElementById. However, the need for the creation of the next line (Button Add Position). So i chose GetElementsByName
Also counted for him the value (in place "after rebate")
--EDIT--
I made a loop "For".
In html code I have a lot the same fields "named" (ex. cena, ile, rabat etc.)
So if I will had 3 rows with this fields I want to calculate for each line separately. But my loop doesn't work.
Full View you can see here:
http://codepen.io/warhero/pen/WwvLZE (121 line JS)
My JS code:
var i;
for (i = 0; i < document.getElementsByName('kwotarabat').length; i++) {
var cena = parseInt(document.getElementsByName('cena')[i].value);
var ile = parseInt(document.getElementsByName('ile')[i].value);
var rabat = parseInt(document.getElementsByName('rabat')[i].value);
var vat = document.getElementsByName('vat')[i].options[document.getElementsByName('vat')[i].selectedIndex].value;
// vat value
var wynik = (ile * cena * vat);
// the net value
var wynik2 = cena * ile;
// net amount after discount
var wynikRabat = (wynik2 * (rabat / 100));
// gross amount after discount
var wynikRabatVat = (wynik * (rabat / 100));
// net amount after discount (display for customers)
var wynikNetto = (wynik2 - wynikRabat);
document.getElementsByName('kwotarabat')[i].innerHTML = (wynik + wynik2 - wynikRabat - wynikRabatVat).toFixed(2);
}
In Here >> http://codepen.io/warhero/pen/ONVEmZ is the code for a single row and calculations are correct.
Any Ideas ?