Question

我正在学习JS作为我学习的一部分，目前我正在尝试W3Schools的一些例子，并且我被困在JS Functions页面上。该页面的链接是： http://www.w3schools.com/js/tryit.asp?filename=tryjs_function_return

如果我使用示例代码，代码运行完全如下代码：

<html>

<head>
</head>

<body>
    <p id="demo"> </p>
    <script>
    function myFunction(a, b) {
        return a * b;
    }
    document.getElementById("demo").innerHTML = myFunction(3, 4);
    </script>
</body>

</html>

但是，如果我将上述代码的脚本部分放在Head标签中，就像下面的代码一样，那么该函数根本不执行，我没有得到任何值：

<html>

<head>
    <script>
    function myFunction(a, b) {
        return a * b;
        document.getElementById("demo").innerHTML = myFunction(3, 4);
    }
    </script>
</head>

<body>
    <p id="demo"> </p>
    <button type="button" onclick="myFunction()">Click me</button>
</body>

</html>

有人能指出我在哪里做错了以及如何解决这个问题。

干杯，

Answer 1

当您在单击处理程序中调用myFunction时，您没有向其传递任何参数，其中的第一个语句也是一个return语句，这意味着第二个参数将不会被执行。

您需要做的是定义函数，使其占用2个参数然后将它们相乘并将结果放到#demo元素。

然后单击该按钮，您可以使用所需参数调用该功能

<html>
    <head>
        <script>
            function myFunction(a , b) {
                document.getElementById("demo").innerHTML = a * b;
            }
        </script>
    </head>
    <body>
        <p id = "demo"> </p>
        <button type="button" onclick = "myFunction(3, 4)">Click me</button>
    </body>
</html>

Answer 2

您的代码有几个问题。以下是解决方法：

首先，在处理参数后，在函数末尾处运行return一个值。在开头有return是不好的。

其次，您必须使用onclick HTML属性中的参数调用该函数。现在，函数调用myFunction()中没有任何内容。它应该看起来像myFunction(3, 4)。

最后，在函数声明中调用myFunction()是什么意思？这没有意义。

我已经通过评论调整了您的代码，以帮助您理解它。这应该会有所帮助。

<html>

<head>
  <script>
    function myFunction(a, b) {
      // Return is usually the last thing you do in a function.
      // Also, don't call a function from within the function.
      // Instead, put what you had in return in the demo element's innerHTML.

      return document.getElementById("demo").innerHTML = a * b; // a * b,
      // not 3 * 4.
    }

  </script>
</head>

<body>
  <p id="demo"> </p>
  <!-- Also, there were no arguments here. You need to specify arguments in 
    the onclick event -->
  <button type="button" onclick="myFunction(3, 4)">Click me</button>
</body>

</html>

我希望这有用！

Answer 3

此功能定义存在重大错误：

function myFunction(a , b) {
return a * b;
document.getElementById("demo").innerHTML = myFunction(3, 4);
}

首先，您使用myFunction()来调用它，它会为a和b分配值undefined;当你乘以它们时，你会得到NaN，你会返回。从函数返回时，函数中没有其他任何内容被执行。如果你没有返回，你将进入一个无限递归循环（这可能以堆栈溢出结束），因为你一次又一次地调用函数。

这些错误是脚本不工作的原因;与它在头脑中无关。

Answer 4

因为你已经在myFunction和

中返回了

document.getElementById("demo").innerHTML = myFunction(3, 4);

未执行。您可以更改为this

<head>
   <script>
      function myFunction(a , b) {
         return a * b;
      }
     function buttonClick() {
      document.getElementById("demo").innerHTML = myFunction(3, 4);
     }
  </script>
</head>
<body>
    <p id = "demo"> </p>
    <button type="button" onclick = "buttonClick()">Click me</button>
</body>

JavaScript函数在正文中工作但在头部

4 个答案: