JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <h1>Future Value Calculator</h1>

  <label for="investment">Total Investment:</label>
  <input type="text" id="investment">
  <span id="investment_error">&nbsp;</span>
  <br>

  <label for="rate">Annual Interest Rate:</label>
  <input type="text" id="annual_rate">
  <span id="rate_error">&nbsp;</span>
  <br>

  <label for="years">Number of Years:</label>
  <input type="text" id="years">
  <span id="years_error">&nbsp;</span>
  <br>

  <label for="future_value">Future Value:</label>
  <input type="text" id="future_value" disabled>
  <br>

  <label>&nbsp;</label>
  <input type="button" id="calculate" value="Calculate">
  <br>
</main>

JavaScript

var $ = function(id) {
  return document.getElementById(id);
};

function calculateFV() {
  investment = parseFloat($("investment").value);
  interest = parseFloat($("annual_rate").value);
  years = parseInt($("years").value);

  var cInterest = investment * interest;

  for (var i = 1; i < years; i++) {
    investment += (cInterest / 100);
  }
  investment = investment.toFixed(2);

  $("future_value").value = investment;
};

window.onload = function() {
  $("investment").focus();
};

$("calculate").onclick = function() {
  calculateFV();
};