Q:

Writing a code in javascript with radio buttons and using if else loop to calculate simple and/or compound interest

I have been asked to write a code in javascript to show the results in the output boxes based on the input data, the form should like the one shown in the attached image:Interest Calculator

Till now, I have written down the following code; however I am unable to get the results in the output boxes. Could someone please help. Thanks in advance.

function calc() {
  {
    var p = document.getElementById("p").value;
    var r = document.getElementById("r").value;
    var t = document.getElementById("t").value;
    var int = f.int.value;
  }
  if (int === "si") {
    var sip = (p * r * t) / 100
    var ta = p + sip
    document.getElementById("i").innerHTML = sip;
    document.getElementById("a").innerHTML = ta;
  } else {
    var cta = p * (Math.pow((1 + r / 100), t))
    var cmp = cta - p
    document.getElementById("i").innerHTML = cmp;
    document.getElementById("a").innerHTML = cta;
  }
}
<form name="f">
  <h1> Interest Calculator </h1>
  Principal = <input type="text" id="p" autofocus>
  <br><br><br> Rate of Interest = <input type="text" id="r">
  <br><br><br> Time (in years) = <input type="text" id="t">
  <br><br>
  <h1> Interest Type </h1>
  <input type="radio" name="int" id="int" value="si"> Simple Interest &nbsp; &nbsp; &nbsp;
  <input type="radio" name="int" id="int" value="ci"> Compound Interest
  <br><br>
  <hr noshade> Interest <input type="text" id="i">
  <br><br> Amount <input type="text" id="a">
  <br><br>
  <input type="button" name="cal" value="Calculate" onclick="calc()"> &nbsp;&nbsp;&nbsp;
  <input type="reset" value="Reset">
</form>

A:

innerHTML is used to retrieve or update the content/markup inside a DOM node that can have children. For input elements, you have to use value to get or set the value of the field.

function calc() {
  {
    var p = document.getElementById("p").value;
    var r = document.getElementById("r").value;
    var t = document.getElementById("t").value;
    var int = f.int.value;
  }
  
  if (int === "si") {
    console.log("simple interest");
    var sip = (p * r * t) / 100
    var ta = p + sip
    document.getElementById("i").value = sip;
    document.getElementById("a").value = ta;
  } else {
    console.log("compound interest");
    var cta = p * (Math.pow((1 + r / 100), t))
    var cmp = cta - p
    document.getElementById("i").value = cmp;
    document.getElementById("a").value = cta;
  }
}
<form name="f">
  <h1> Interest Calculator </h1>
  Principal = <input type="text" id="p" autofocus>
  <br><br><br> Rate of Interest = <input type="text" id="r">
  <br><br><br> Time (in years) = <input type="text" id="t">
  <br><br>
  <h1> Interest Type </h1>
  <input type="radio" name="int" id="int" value="si"> Simple Interest &nbsp; &nbsp; &nbsp;
  <input type="radio" name="int" id="int" value="ci"> Compound Interest
  <br><br>
  <hr noshade> Interest <input type="text" id="i">
  <br><br> Amount <input type="text" id="a">
  <br><br>
  <input type="button" name="cal" value="Calculate" onclick="calc()"> &nbsp;&nbsp;&nbsp;
  <input type="reset" value="Reset"><br><br><br>
</form>

