JavaScript 没有将结果值设置到 <p> 的 innerHTML 中

Question

这是我的 HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
    Calculator
    </title>
    <script src="JScript1.js" type="text/javascript"></script>
</head>
<body>
  &nbsp &nbsp &nbsp &nbsp 
  <h1> Calculator </h1>
  <form>
    <input id="txt1" type="text" />
       &nbsp &nbsp &nbsp 

    <input id="rad1" type="radio" value="add" />add &nbsp
    <input id="rad2" type="radio" value="mul" />mul &nbsp
    <input id="rad3" type="radio" value="div" />div &nbsp
    <input id="rad4" type="radio" value="sub" />sub &nbsp

      &nbsp &nbsp &nbsp
    <input id="txt2" type="text" />
    <button id="mButton" value="Calculate" onclick="calculate()">Calculate!!</button>
  </form>
<p id="resultP">Result will be displayed here:</p>
</body>
</html>

这里是 JavaScript:

function calculate()
{
  var first = document.getElementById('txt1').value;
  var sec = document.getElementById('txt2').value;
  var result;
  if (document.getElementById('rad1').checked) {
    result = parseInt(first) + parseInt(sec);
  }
  else if (document.getElementById('rad2').checked) {
    result = first * sec;
  }
  else if (document.getElementById('rad3').checked) {
    result = first / sec;
  }
  else if (document.getElementById('rad4').checked) {
    result = first - sec;
  }
  alert(result);
  var resultP = document.getElementById('resultP');
  resultP.innerHTML = result;
};

最多 alert(result); 工作正常。但它没有在那个 p 标签中设置结果。此外，当我按计算时，整个页面 blinks，并且在两个输入字段中输入的值都消失了。

而且当我按计算时，地址栏上的 link 更改为 /htmlCode.html?arithematic2=mul

Answer 1

页面因重新加载而闪烁。表单中默认的 <button> 类型是 submit。您的 JavaScript 代码不会阻止提交表单，因此在执行 calculate 后，它会重定向到同一页面，将所有表单数据添加到 URL.

您应该将按钮定义为

<button type="button" onclick="calculate()">Calculate</button>

或附加 calculate 函数作为表单的 submit 事件处理程序并阻止提交，例如使用纯 HTML 属性：

<form onsubmit="calculate(); return false;">

Answer 2

这是因为按下事件会触发可以防止这种情况发生的表单，您需要在单击时使事件静音。 function calculate(event) { event.preventDefault() ...

Answer 3

试试这个：

HTML

<h1> Calculator </h1>
  <form>
    <input id="txt1" type="text" />    
    <input type="radio" id="rad1" name="a" value="add" />add 
    <input type="radio" id="rad2" name="a" value="mul" />mul
    <input type="radio" id="rad3" name="a" value="div" />div
    <input type="radio" id="rad4" name="a" value="sub" />sub
    <input id="txt2" type="text" />
    <button id="mButton" value="Calculate" onclick="return calculate()">Calculate!!</button>
  </form>
<p>Result will be displayed here: <span id="resultP"></span></p>

JavaScript

    function calculate()
    {       
        var first = document.getElementById('txt1').value;
        var sec = document.getElementById('txt2').value;
        var result;
        if (document.getElementById('rad1').checked) {
                    result = parseInt(first) + parseInt(sec);
        }
        else if (document.getElementById('rad2').checked) {
                    result = first * sec;
        }
        else if (document.getElementById('rad3').checked) {
            result = first / sec;
        }
        else if (document.getElementById('rad4').checked) {
            result = first - sec;
        }
                
        var resultP = document.getElementById('resultP');
        resultP.innerHTML = result;
    
        return false;//this will prevent the default action
   }

Answer 4

将此添加到您的按钮，它将正常工作

type='button'

JavaScript 没有将结果值设置到 <p> 的 innerHTML 中

JavaScript is not setting the resultant value into <p>'s innerHTML

html

javascript

innerhtml

HTML

JavaScript