为什么 innerHTML 无法设置 id = 'result' 字段的值来显示兴趣..？

Question

[我无法获得获得简单利息的期望输出....这里 innerhtml 没有响应设置 id = 'result' 字段的值......这里我已经发布了我的代码部分..

<!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]

Answer 1

首先，你的公式是a * b * c，小错别字。

您在表单中有一个提交类型的按钮。要解决此问题，请将事件对象传递给函数并禁用默认行为。

<button onclick="fun1(event)">

fun1(e) {
  e.preventDefault()

  ...
}

Answer 2

您的值是 a、b、c，而不是 p、n、r。所以用a,b,c来计算结果。并在提交表单时使用preventDefault()，使页面不刷新。

    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>

为什么 innerHTML 无法设置 id = 'result' 字段的值来显示兴趣..？

why innerHTML is not able to set the value of id = 'result' field to show the interest ..?

html

javascript

innerhtml

web-developer-toolbar