Question

我正在尝试自学JavaScript，但是我走的不远，我不知道自己在做什么错。我创建了一个函数fixedSpending（），该函数接受两个输入num1和num2并将其相加。我希望函数在用户单击“ =”按钮时返回总计。到目前为止，这还没有发生，因为未定义fixedSpending（）但我不明白为什么，因此在控制台上收到未捕获的参考错误。

任何帮助或学习材料将不胜感激。

 <html>
    
    <head>
      <title>
        Budget Form
        <script type="text/javascript">
        function fixedSpending(){
          var num1=parseFloat(document.getElementById("num1").value)
          var num2=parseFloat(document.getElementById("num2").value)
    
          return document.getElementById('result').value= num1 + num2;
        } 
        </script>
      </title>
    
    </head>
    <body>
      <h2></h2>
      <br>
      num1:&nbsp;<input type="text" id="num1" maxlength="10"><br>
      num2:&nbsp;<input type="text" id="num2" maxlength="10"><br>
      <input type="Button" value= "=" onclick="fixedSpending();"><br>
      Result: <input type="text" id="result">
    </body>
</html>

未捕获的ReferenceError：未定义fixedSpending

Answer 1

您的HTML似乎格式错误，因为您的<script>标记内有<title>标记。如果将代码移到标记之外，代码应该可以正常工作

<html>
    <head>
        <title>Budget Form</title>
        <script type="text/javascript">
        function fixedSpending(){
            var num1=parseFloat(document.getElementById("num1").value)
            var num2=parseFloat(document.getElementById("num2").value)

            return document.getElementById('result').value= num1 + num2;
        }
        </script>
    </head>
    <body>
        <h2></h2>
        <br>
        num1:&nbsp;<input type="text" id="num1" maxlength="10"><br>
        num2:&nbsp;<input type="text" id="num2" maxlength="10"><br>
        <input type="Button" value= "=" onclick="fixedSpending();"><br>
        Result: <input type="text" id="result">
    </body>
</html>

Answer 2

首先，将脚本从标题标签中拉出，现在它已嵌套在其中。

第二个-将脚本向下移到结束body标签上方（此一个）。这是为了确保您尝试操作和使用其中的数据的表单域在对它们进行任何处理之前都已呈现，这是常见的做法。

第三-从函数中删除单词“ return”。此函数不需要显式返回任何内容，因为您不对任何内容使用返回值。您只希望函数设置结果字段的值。因此，只需从函数的最后一行删除“ return”一词即可。

Answer 3

如@Bjarke所述，您的脚本未正确嵌入。您应该将脚本放在结束</body>标记上方。而且，您不必使用return语句，因为您只是将值分配给输入字段。试试：

<html>
  <head>
    <title>
      Budget Form
    </title>
  </head>
  <body>
    <h2></h2>
    <br>
    num1:&nbsp;<input type="text" id="num1" maxlength="10"><br>
    num2:&nbsp;<input type="text" id="num2" maxlength="10"><br>
    <input type="button" value= "=" onclick="fixedSpending();"><br>
    Result: <input type="text" id="result">
    <script>
        function fixedSpending() {
            var num1 = parseFloat(document.getElementById("num1").value)
            var num2 = parseFloat(document.getElementById("num2").value)
            document.getElementById('result').value = num1 + num2;
        };
    </script>
  </body>
</html>

在jsfiddle上测试此代码：https://jsfiddle.net/mzvnfow2/2/

如何获取函数以返回结果

3 个答案: