JavaScript函数在body中工作，但在Head中不起作用

JavaScript Function works in body but not in Head

本文关键字：但在 Head 不起作用 工作 body JavaScript 函数      更新时间：2023-09-26

我正在学习JS作为我研究的一部分，目前我正在尝试从W3Schools的一些例子，我被困在JS函数页面。网页的连结为: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>

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

欢呼,

您的代码有几个问题。下面是修复方法:

首先，将函数return的a值在函数结束后，进行参数处理。一开始就有一个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>

我希望这是有帮助的!

当你在点击处理程序中调用myFunction时，你没有传递任何参数给它，其中的第一个语句是一个返回语句，这意味着第二个参数将不会被执行。

你需要做的是这样定义函数，它将接受两个参数，然后将它们相乘，并将结果放入#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>

这个函数定义有明显的错误:

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

首先，您使用myFunction()调用它，它将a和b赋值为undefined;当你把它们相乘，你得到NaN，你返回它。当你从一个函数返回时，函数中的其他部分不会被执行。如果你不返回，你就会进入一个无限递归循环(可能会以堆栈溢出结束)，因为你一次又一次地调用函数本身。

这些错误是脚本不工作的原因;

因为在myFunction和

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

不执行。可以改成这样

<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>
相关文章：