5

我有一个简单的 HTML 表单，带有 3 个输入字段，当您点击 = 按钮时，它假设添加您在前 2 个输入字段中键入的 2 个数字并在第 3 个字段中显示结果。有可能这样做吗？（我需要一个框（或表格）或一些东西而不是纯文本）。我尝试以下但不起作用（它什么都不做），有人可以帮助我吗？

<HTML>
      <HEAD>
        <TITLE>Sum</TITLE>

        <script type="text/javascript">
          function sum()
          {
             var num1 = document.myform.number1.value;
             var num2 = document.myform.number2.value;
             var sum = parseInt(num1) + parseInt(num2);
             document.getElementById('add').innerHTML = sum;
          }
        </script>
      </HEAD>

      <BODY>
        <FORM NAME="myform">
          <INPUT TYPE="text" NAME="number1" VALUE=""> + 
          <INPUT TYPE="text" NAME="number2" VALUE="">
          <INPUT TYPE="button" NAME="button" Value="=" onClick="sum()">
          <INPUT TYPE="text" ID="add" NAME="result" VALUE="">
        </FORM>

      </BODY>
</HTML>
4

4 回答 4

8

innerHTML设置元素内的文本（包括 html 元素）。通常我们将它用于 div、span 等元素，以在其中插入其他 html 元素。

对于您的情况，您想要设置输入元素的值。所以你应该使用该value属性。

更改innerHTML为value

document.getElementById('add').value = sum;
于 2012-06-14T20:56:49.650 回答
4 
 <HTML>
      <HEAD>
        <TITLE>Sum</TITLE>

        <script type="text/javascript">
          function sum()
          {

             var num1 = document.myform.number1.value;
             var num2 = document.myform.number2.value;
             var sum = parseInt(num1) + parseInt(num2);
             document.getElementById('add').value = sum;
          }
        </script>
      </HEAD>

      <BODY>
        <FORM NAME="myform">
          <INPUT TYPE="text" NAME="number1" VALUE=""/> + 
          <INPUT TYPE="text" NAME="number2" VALUE=""/>
          <INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
          <INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
        </FORM>

      </BODY>
</HTML>

这应该可以正常工作。1.设置第3个字段（输入字段）时使用.value而不是“innerHTML” 2.关闭输入标签

于 2012-06-14T21:11:05.583 回答
3

您真的希望结果出现在输入框中吗？如果不是，请考虑将边框设置为透明以外的表格并使用

document.getElementById('sum').innerHTML = sum;

于 2012-06-14T21:02:25.063 回答
0

带有 .value 和 INPUT 标签

<HTML>
  <HEAD>
    <TITLE>Sum</TITLE>

    <script type="text/javascript">
      function sum()
      {

         var num1 = document.myform.number1.value;
         var num2 = document.myform.number2.value;
         var sum = parseInt(num1) + parseInt(num2);
         document.getElementById('add').value = sum;
      }
    </script>
  </HEAD>

  <BODY>
    <FORM NAME="myform">
      <INPUT TYPE="text" NAME="number1" VALUE=""/> + 
      <INPUT TYPE="text" NAME="number2" VALUE=""/>
      <INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
      <INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
    </FORM>

  </BODY>
</HTML>

使用 innerHTML 和 DIV

<HTML>
  <HEAD>
    <TITLE>Sum</TITLE>

    <script type="text/javascript">
      function sum()
      {

         var num1 = document.myform.number1.value;
         var num2 = document.myform.number2.value;
         var sum = parseInt(num1) + parseInt(num2);
         document.getElementById('add').innerHTML = sum;
      }
    </script>
  </HEAD>

  <BODY>
    <FORM NAME="myform">
      <INPUT TYPE="text" NAME="number1" VALUE=""/> + 
      <INPUT TYPE="text" NAME="number2" VALUE=""/>
      <INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
      <DIV  ID="add"></DIV>
    </FORM>

  </BODY>
</HTML>
于 2018-01-24T05:51:07.720 回答