Question

我这里有代码。此代码中没有错误，但是当我尝试执行此操作时，输出仅显示一小段时间。之后，字段将更改为null。即使单击提交按钮，我也希望显示所有值。

<script type="text/javascript">
    function calcu() {
        var h = parseInt(document.getElementById("height").value);
        var w = parseInt(document.getElementById("weight").value);
        var r = h + w;
        document.getElementById("res").innerHTML = r;
        if (r < 50) {
            var x = document.getElementById("report");
            x.innerHTML = "less 50";
        }
        if (r > 50) {
            var xy = document.getElementById("report");
            xy.innerHTML = "high 50";
        }
    }

<body>
    <form onsubmit="calcu();">
        <table>
            <tr>
                <td>Height:</td>
                <td>
                    <input type="text" id="height">
                </td>
            </tr>
            <tr>
                <td>Weight:</td>
                <td>
                    <input type="text" id="weight">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="CALCULATE">
                </td>
                <td>
                    <p id="res"></p>
                </td>
            </tr>
        </table>
        <p id="report">REPORT</p>
        <p id="tip"></p>
    </form>

Answer 1

首先显示您的代码。

我可以从你的陈述中得到的是，你有一个类型提交的按钮，你的值没有保留，因为当你点击提交类型按钮时，它会发布你的数据并找到下一个必须去的地方属性好像你没有给出action属性（a / c给我）所以它重新加载刷新整个内容的页面，这就是你的页面没有保存数据的原因。但是，如果你想让它保持按钮类型简单的“按钮”。我认为这将解决您的问题。

Answer 2

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
  <script type="text/javascript" >

      function calcu() {
          var h = parseInt(document.getElementById("height").value);
          var w = parseInt(document.getElementById("weight").value);
          var r = h + w;


          document.getElementById("res").innerHTML = r;
          if (r < 50) {
              var x = document.getElementById("report");
              x.innerHTML = "less 50";
          }
          if (r > 50) {
              var xy = document.getElementById("report");
              xy.innerHTML = "high 50";
          }
      }
  </script>
  </head>



  <body>
      <form id="form1" >
      <table>
              <tr>
            <td>Height:</td>
            <td>
                <input type="text" id="height" />
            </td>
        </tr>
        <tr>
            <td>Weight:</td>
            <td>
                <input type="text" id="weight"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="CALCULATE" onclick="calcu();" />
            </td>
            <td>
                <p id="res"></p>
            </td>
        </tr>
    </table>
    <p id="report">REPORT</p>
    <p id="tip"></p>
</form>

这样做会很好你在表单提交上调用函数重新加载页面所以前一页不存在这就是为什么没有做任何好事所以你必须将你的按钮类型更改为按钮和按钮点击你可以调用该函数你会得到你想要的结果。

单击提交按钮后，值会自动更改

2 个答案: