<html>
<title>::Uso de getElementById::</title>
<head>
<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=parseInt(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>