无法通过 javascript 从输入字段中选择值

debugcn 发表于 Dev

法赞纳伊姆

<form id="form1">
        <table style="border:1px solid black ; font-family : Arial">
            <tr>
                <td>
                    First Number
                </td>
                <td>
                    <input id="Text1" type="text"/>
                </td>
            </tr>
            <tr>
                <td>
                    Second Number
                </td>
                <td>
                    <input id="Text2" type="text"/>
                </td>
            </tr>
            <tr>
                <td>
                   Resut
                </td>
                <td>
                    <input id="ResultArea" type="text"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="AddButton" type="button" value="Add" onclick="add()" />
                </td>
            </tr>
        </table>
        </form>

我正在通过 JavaScript 制作简单的程序，用户可以在其中输入 2 个数字，通过单击添加按钮，他将获得这两个输入的总和。为此，我有两个输入字段用于第一个和第二个输入，一个输入字段用于显示求和后的结果，还有一个添加按钮。所以这里是我的java脚本函数。

function add() {
                    var FirstNumber = document.getElementById("Text1").Value
                    var SecondNumber = document.getElementById("Text2").Value
                    document.getElementById("ResultArea").Value = FirstNumber + SecondNumber;
                }

我不知道是什么问题，但无论如何它都不起作用。当输入并单击添加按钮时，没有响应，没有错误，什么都没有。

普拉桑

错字更改value而不是Value. V不是大写。因为 JavaScript 区分大小写。并且您需要parse使用字符串parseFloat()。然后只执行加法

function add() {
  var FirstNumber = document.getElementById("Text1").value
  var SecondNumber = document.getElementById("Text2").value
  document.getElementById("ResultArea").value = parseFloat(FirstNumber)+ parseFloat(SecondNumber);
}

<form id="form1">
  <table style="border:1px solid black ; font-family : Arial">
    <tr>
      <td>
        First Number
      </td>
      <td>
        <input id="Text1" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        Second Number
      </td>
      <td>
        <input id="Text2" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        Resut
      </td>
      <td>
        <input id="ResultArea" type="text" />
      </td>
    </tr>
    <tr>
      <td>
        <input id="AddButton" type="button" value="Add" onclick="add()" />
      </td>
    </tr>
  </table>
</form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。