[No puedo obtener el resultado deseado de obtener el interés simple... aquí innerhtml no responde para establecer el valor del campo id = 'resultado'... aquí he publicado mi parte del código...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <script type="text/javascript"> function fun1() { var a = document.getElementById('p').value ; var b = document.getElementById('n').value ; var c = document.getElementById('r').value ; var result = document.getElementById('result'); result.innerHTML = "The interest is" + (p*n*r/100) ; } </script> </head> <body> <form name="form1"> <label> Enter Principal amount : <input type="text" id="p"><br> </label> <label> Enter no. of years : <input type="text" id="n"><br> </label> <label> Enter rate : <input type="text" id="r"><br> </label> <button type="submit" onclick="fun1()"> calculate </button> <p id="result"> </p> </form> <script type="text/javascript"> </script> </body> </html>] [ 1]
En primer lugar, su fórmula es a * b * c, pequeño error tipográfico.
Tienes un botón de tipo enviar dentro de un formulario. Para solucionar esto, pase el objeto de evento a la función y deshabilite el comportamiento predeterminado.
<button onclick="fun1(event)"> fun1(e) { e.preventDefault() ... }Sus valores son a,b,c, no p,n,r. Así que usa a,b,c para calcular el resultado. Y use preventDefault() cuando se envíe el formulario para que la página no se actualice.
function fun1(event) { event.preventDefault() var a = document.getElementById('p').value ; var b = document.getElementById('n').value ; var c = document.getElementById('r').value ; var result = document.getElementById('result'); result.innerHTML = "The interest is" + (a*b*c/100) ; } <form name="form1" onSubmit = "fun1(event)"> <label> Enter Principal amount : <input type="text" id="p"><br> </label> <label> Enter no. of years : <input type="text" id="n"><br> </label> <label> Enter rate : <input type="text" id="r"><br> </label> <button> calculate </button> <p id="result"> </p> </form>