49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
"use strict";
|
|
|
|
const getElement = selector => document.querySelector(selector);
|
|
|
|
const clearMessages = () => {
|
|
getElement("#investment").nextElementSibling.textContent = "*";
|
|
getElement("#years").nextElementSibling.textContent = "*";
|
|
getElement("#message").textContent = "";
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const form = getElement("form");
|
|
form.noValidate = true;
|
|
|
|
for (let element of form.elements) {
|
|
element.addEventListener("invalid", evt => {
|
|
const elem = evt.currentTarget;
|
|
const span = elem.nextElementSibling;
|
|
if (span) span.textContent = elem.validationMessage;
|
|
});
|
|
}
|
|
|
|
form.addEventListener("submit", evt => {
|
|
clearMessages();
|
|
evt.preventDefault(); // prevent form submission in all cases
|
|
|
|
// get future value text box and clear any previous value
|
|
const fv = getElement("#future_value");
|
|
fv.value = "";
|
|
|
|
// if form is valid, display future value or error message
|
|
if (form.checkValidity()) {
|
|
try {
|
|
const investment = getElement("#investment").value;
|
|
const years = getElement("#years").value;
|
|
fv.value = calcFutureValue(investment, years);
|
|
} catch(e) {
|
|
const msg = `${e.name}: ${e.message}`;
|
|
getElement("#message").textContent = msg;
|
|
}
|
|
}
|
|
});
|
|
|
|
getElement("#clear").addEventListener("click", () => {
|
|
clearMessages();
|
|
getElement("#investment").focus();
|
|
});
|
|
});
|