html – How to do a JavaScript calculation on page load?-ThrowExceptions

Exception or error:

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();
  }
}
How to solve:

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();

Leave a Reply

Your email address will not be published. Required fields are marked *