JavaScript在线计算器点击按钮无响应，结果无法显示问题排查

核心错误点 #

• 事件绑定冲突+参数缺失：HTML按钮同时使用onclick="calculate()"和表单submit事件绑定，且直接调用calculate()未传递event参数，执行event.preventDefault()时会抛出错误，导致函数中断。
• DOM元素ID不匹配：JS中获取输入框的ID（years-to-retire、passive-income）与HTML实际ID（yearsToRetire、passiveIncome）不一致，无法正确获取输入值，计算结果会变为NaN。
• 结果容器默认隐藏：CSS里#results设置了display: none，即使成功赋值内容，也无法在页面上显示。
• 投资年限计算逻辑错误：yearsToInvest的公式yearsToRetire - (age >= 60 ? 0 : yearsToRetire)会导致年龄小于60时结果为0，通胀计算完全失效（任何数的0次方为1），不符合实际投资逻辑。

修正后的完整代码 #

HTML部分

<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>

CSS部分

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 {
  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;
}

JS部分

function calculate(event) {
  event.preventDefault(); // 阻止表单提交刷新页面

  // 获取输入值
  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);

  // 修正计算逻辑：如果年龄已达60，投资年限为0；否则为退休剩余年限
  const inflationRate = 0.025;
  const yearsToInvest = age >= 60 ? 0 : yearsToRetire;
  const passiveIncomeTarget = passiveIncome / 0.95;
  const futureValueTarget = passiveIncomeTarget * ((1 + inflationRate) ** yearsToInvest);

  // 格式化结果
  const passiveIncomeTargetFormatted = formatCurrency(passiveIncomeTarget);
  const futureValueTargetFormatted = formatCurrency(futureValueTarget);

  // 展示结果
  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
  });
}

// 仅保留表单submit事件绑定
const form = document.getElementById('calculator');
form.addEventListener('submit', calculate);

内容的提问来源于stack exchange，提问作者Ian furemingu