interes.html

<html>
<title>::Uso de getElementById::</title>
<head>
<!--
Autor: Ariel Carraro
-->
<script type="text/javascript" language="javascript">
console.log('aqui se crea la función')
function calculo(){

       // aqui hago uso de la propiedad getElementById("")
      var vi=document.getElementById('valor_inicial');
      var vf=document.getElementById('valor_final');
      var n=document.getElementById('periodo');

      //muestro los datos en la consola
      console.log("valor final:  "+vf.value+"   valor inicial:"+vi.value+"  periodo:  "+n.value);

      // convertir los datos string a number
      vf=parseFloat(vf.value);
      vi=parseFloat(vi.value);
      n=parseFloat(n.value);

      // esta es la variable que mostrará el resultado
      var result=document.getElementById('result');

      //aqui se hace la operación
      result.value=Math.pow(vf/vi,1/n) - 1*100;
    }


function limpia(){

    document.getElementById('valor_final').value="";
        document.getElementById('valor_inicial').value="";
        document.getElementById('periodo').value="";
        document.getElementById('result').value="";
    }

</script>
</head>
<body>
<h1>Calcular tasa de interés</h1>
    <div>

  valor final:
        <input id="valor_final" type="text" value=""/><br/>
    valor inicial:<input id="valor_inicial"  type="text" value=""/><br/>
  periodo:<input id="periodo"  type="text" value=""/><br/>
        <button onclick="calculo()">Calcular</button>
    Tasa de interés generado:<b><input id="result"  type="text" value=""/></b>
    <button onclick="limpia()">Borrar</button>
    </div>
</body>
</html>