script.js

function compute()
{
    // get values from the form and validate some of them
    var principal = document.getElementById("principal").value;
    if (principal <=0 ){
        alert("Enter a positive number")
        // clean up if something was displayed
        document.getElementById("result").innerHTML="";
        document.getElementById("principal").focus()
    }
    var rate = document.getElementById("rate").value;
    var years = document.getElementById("years").value;

    // do the calculations to get final year and interest
    var interest = principal * years * rate /100;
    var year = new Date().getFullYear()+parseInt(years);
    var results_to_display = "If you deposit " + "<mark>" + principal.toString() + "</mark>" + "," + "<br>" + " \
at an interest rate of " + "<mark>" + rate.toString() + "%" + "</mark>" + "." + "<br>" + " \
You will receive an amount of " + "<mark>" + interest.toString() + "</mark>" + " ," + "<br>" + " \
in the year " + "<mark>" + year.toString() + "</mark>" + "<br>"

    // display results in the html
    document.getElementById("result").innerHTML=results_to_display;
}

function updateRate() 
{   // get and display value from the slider
    var rateval = document.getElementById("rate").value;
    var rateval_display = rateval.toString() + "%"
    document.getElementById("rate_val").innerText=rateval_display;
}

// function that ensures correct value is displayed on page reload
window.onload = function() {
  updateRate();
};