No response upon clicking button (javascript)

February 26, 2023

I am building an online calculator, and am having a lot of trouble getting results to display on the same page.

What am I doing wrong that the results are not displaying?

The ideal scenario is the user inputs the 4 pieces of info, then the logic is performed, and the answers are displayed below the page…?

function calculate(event) {
  event.preventDefault(); // prevent form submission from reloading the page

  // Get input values
  const name = document.getElementById('name').value;
  const age = parseInt(document.getElementById('age').value);
  const yearsToRetire = parseInt(document.getElementById('years-to-retire').value);
  const passiveIncome = parseInt(document.getElementById('passive-income').value);

  // Calculate results
  const inflationRate = 0.025;
  const yearsToInvest = yearsToRetire - (age >= 60 ? 0 : yearsToRetire);
  const passiveIncomeTarget = passiveIncome / 0.95;
  const futureValueTarget = passiveIncomeTarget * ((1 + inflationRate) ** yearsToInvest);

  // Prepare result strings
  const passiveIncomeTargetFormatted = formatCurrency(passiveIncomeTarget);
  const futureValueTargetFormatted = formatCurrency(futureValueTarget);

  // Display results
  const resultsDiv = document.getElementById('results');
  resultsDiv.innerHTML = `
    <h2>Results for ${name}</h2>
    <p>Your target passive income is <strong>${passiveIncomeTargetFormatted}</strong> per year.</p>
    <p>To achieve this, you need to have a total of <strong>${futureValueTargetFormatted}</strong> in investments.</p>
  `;
}

function formatCurrency(amount) {
  return '$' + amount.toLocaleString('en-US', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  });
}

const form = document.getElementById('calculator');
form.addEventListener('submit', calculate);

body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}

h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 30px;
}

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin-bottom: 30px;
}

label {
  font-size: 18px;
  margin-bottom: 5px;
}

input[type="number"],
input[type="text"] {
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
}

button[type="submit"] {
  font-size: 18px;
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}

#results {
  display: none;
  margin-top: 30px;
  font-size: 24px;
}

#results p {
  margin: 10px 0;
}

#results table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

#results th,
#results td {
  padding: 10px;
  border: 1px solid #ccc;
}

#results th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: left;
}

<div class="container">
  <h1>Calc</h1>
  <form id="calculator">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="0" max="120" required>

    <label for="yearsToRetire">Years Until Retirement:</label>
    <input type="number" id="yearsToRetire" name="yearsToRetire" min="1" max="50" required>

    <label for="passiveIncome">Desired Passive Income in Retirement:</label>
    <input type="number" id="passiveIncome" name="passiveIncome" min="0" required>

    <button onclick="calculate()">Calculate</button>
  </form>

  <div id="results"></div>
</div>

>Solution :

Remove the onclick attribute from the button and change the buttons type attribute to submit.
Elements with id years-to-retire and passive-income doesn’t exist. Use these selectors yearsToRetire and passiveIncome instead.

Try this

function formatCurrency(amount) {
  return '$' + amount.toLocaleString('en-US', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  });
}

document.getElementById('calculator').addEventListener('submit', function(event) {
  event.preventDefault(); // prevent form submission from reloading the page

  // Get input values
  const name = document.getElementById('name').value;
  const age = parseInt(document.getElementById('age').value);
  const yearsToRetire = parseInt(document.getElementById('yearsToRetire').value);
  const passiveIncome = parseInt(document.getElementById('passiveIncome').value);

  // Calculate results
  const inflationRate = 0.025;
  const yearsToInvest = yearsToRetire - (age >= 60 ? 0 : yearsToRetire);
  const passiveIncomeTarget = passiveIncome / 0.95;
  const futureValueTarget = passiveIncomeTarget * ((1 + inflationRate) ** yearsToInvest);

  // Prepare result strings
  const passiveIncomeTargetFormatted = formatCurrency(passiveIncomeTarget);
  const futureValueTargetFormatted = formatCurrency(futureValueTarget);

  // Display results
  const resultsDiv = document.getElementById('results');
  resultsDiv.innerHTML = `
        <h2>Results for ${name}</h2>
        <p>Your target passive income is <strong>${passiveIncomeTargetFormatted}</strong> per year.</p>
        <p>To achieve this, you need to have a total of <strong>${futureValueTargetFormatted}</strong> in investments.</p>
      `;
});

body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}

h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 30px;
}

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin-bottom: 30px;
}

label {
  font-size: 18px;
  margin-bottom: 5px;
}

input[type="number"],
input[type="text"] {
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
}

button[type="submit"] {
  font-size: 18px;
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}

#results {
  /*      display: none;*/
  margin-top: 30px;
  font-size: 24px;
}

#results p {
  margin: 10px 0;
}

#results table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

#results th,
#results td {
  padding: 10px;
  border: 1px solid #ccc;
}

#results th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: left;
}

<div class="container">
  <h1>Calc</h1>
  <form id="calculator">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="0" max="120" required>

    <label for="yearsToRetire">Years Until Retirement:</label>
    <input type="number" id="yearsToRetire" name="yearsToRetire" min="1" max="50" required>

    <label for="passiveIncome">Desired Passive Income in Retirement:</label>
    <input type="number" id="passiveIncome" name="passiveIncome" min="0" required>

    <button type="submit">Calculate</button>
  </form>

  <div id="results"></div>
</div>