JavaScript没有将结果值设置为<p>'的innerHTML

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

本文关键字：lt innerHTML gt 结果 设置 JavaScript      更新时间：2023-09-26

这是我的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标签中设置结果。此外，当我按下"计算"时，整个页面都会闪烁，在两个输入字段中输入的值都消失了。

此外，当我按下"计算"时，地址栏上的链接将更改为/htmlCode.html?arithematic2=mul

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

您应该将按钮定义为

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

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

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

试试这个：

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
   }

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

将其添加到按钮中，就会正常工作

type='button'
相关文章：