I can't seem to see what's missing in my JavaScript and HTML code

Question

I'm new to JavaScript and am having a difficult time having my computations displayed. The message on my JavaScript code said that it was missing a declaration variable. I really don't know what else to try since I'm new to this and I've been stuck on this for a few days now, it's extremely embarrassing. Here is my HTML code where the computations should display and the corresponding JavaScript to it:

function compute() {
    var principal = parseFloat(document.getElementById("principal").value);
    var rate = parseFloat(document.getElementByIdementById("rate").value);
    var years = parseFloat(document.getElementById("years").value);
    var result = principal * years * rate /100;
    var years = new Date().getFullYear()+parseInt(years);
}

<button onclick="compute()">Compute Interest</button>
<span id="result"></span>
<p id="result"></p>

<script>
function compute() {
   document.getElementById("result").innerHTML = "If you deposit<mark>"
   +principal+"</mark>,<br/> at an interest rate of<mark>"
   +rate+"%</mark><br/>. You will receive an amount of<mark>"+result+
   ",</mark><br/>in the year<mark>"+year+"</mark><br/>";
}
</script>

Answer 1

Welcome on StackOverflow.

Let's go to watch your code, there are several errors:

1. You have declared a function compute() (the first one) that create and assign a value to some variables whose scope is inside the function! In the second compute() function you are trying to access the value of those variables that are not declared inside it and whose scope is limited to the first function -> so the compiler will give the error Undefined variable .

2. There is a misspell of getElementById : var rate = parseFloat(document.getElementByIdementById("rate").value);

3. In the first compute() function you have declared a variable using the same name years -> better to use a different name or simply overwrite it.

4. You have used the same id="result" in two different HTML tags, that does not have sense because id should identify only one element; I suppose that you want to put the result of the elaboration inside the <p> element.

So you have to do modify your code and put it inside one compute() function:

<script>
function compute() {
    var principal = parseFloat(document.getElementById("principal").value);
    var rate = parseFloat(document.getElementById("rate").value);
    var years = parseFloat(document.getElementById("years").value);
    var result = principal * years * rate /100;
    var years_modified = new Date().getFullYear() + parseInt(years);

    document.getElementById("result").innerHTML = "If you deposit<mark>"
   + principal + "</mark> , <br/> at an interest rate of<mark>"
   + rate + "%</mark><br/>. You will receive an amount of<mark>" + result +
   ",</mark><br/>in the year<mark>" + years_modified + "</mark><br/>";
}
</script>

<button onclick="compute()">Compute Interest</button>
<span></span>
<p id="result"></p>

• Reference: Scope of JavaScript functions

PS = I would like to give you a suggestion, avoid using the same name for more than one function, you may run into unexpected behavior

Answer 2

This should work for you:

HTML:

<script>
function compute() 
  {
   var principal = parseFloat(document.getElementById("principal").value);
   var rate = parseFloat(document.getElementById("rate").value);
   var years = parseFloat(document.getElementById("years").value);
   var result = principal * years * rate /100;
   var years_result = new Date().getFullYear()+parseInt(years);
   document.getElementById("result").innerHTML = "If you deposit<mark>"
   +principal+"</mark>,<br/> at an interest rate of<mark>"
   +rate+"%</mark><br/>. You will receive an amount of<mark>"+result+
   ",</mark><br/>in the year<mark>"+years_result+"</mark><br/>";
   }
 </script>
<button onclick="compute()">Compute Interest</button>
<span id="result"></span>
<p id="result"></p>

Let me know how it goes!

Answer 3

Maybe this is will work.

function compute() {
  var principal = parseFloat(document.getElementById("principal").value);
  var rate = parseFloat(document.getElementById("rate").value);
  var years = parseFloat(document.getElementById("years").value);
  var result = principal * years * rate / 100;
  var years_result = new Date().getFullYear() + parseInt(years);

  document.getElementById("result").innerHTML = `
    If you deposit <mark>${principal}</mark>
    <br/> at an interest rate of
    <mark>${rate}%</mark><br/>.
    You will receive an amount of <mark>${result}</mark>
    <br/> in the year <mark>${years_result}</mark><br/>`;
}

You also had an error on var rate = parseFloat(document.getElementByIdementById("rate").value);

And when specified on HTML elements, the id attribute value must be unique.