Question

我在另一个函数中有一个函数，我想从html文档中调用内部函数。

    <head>

<meta charset="utf-8">
<title></title>

<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<input id="start" value="start" type="button" onclick="start()">
</body>

和JS。

function first()
{
    alert("First")

    function start()
    {
        alert("start");
    }
}

为什么在这种情况下按钮不起作用？谢谢

Answer 1

这是因为start函数在first函数范围内被封装。

一种方法是通过分配将start公开到全局window对象：

function first() {
    alert("First");
    window.start = function() { // encapsulated but available to the global window object
        alert("start");
    };
}

first(); // Still needed in order to execute it and expose `start`

以类似的方式将start变量暴露在函数范围之外：

var start = null; // (Says hello to window)

function first() {
    alert("First");
    start = function() {
        alert("start");
    };
}

// Here `start` is still null
first(); // Now `start` is a function

Answer 2

你必须在Javascript function/variable scoping上阅读。您的start函数是在first函数中定义的，因此它被视为该函数的本地函数。为了使其在脚本中的任何位置可用/可调用，它必须属于全局或窗口对象的浏览器。有几种方法可以实现这一目标。

1）在第一个函数之外定义start变量作为窗口对象的属性。然后，在第一个函数内部，为它指定一个函数引用。

var start = null; //defined variable outside of any function, and so has global scope

function first()
{
   alert("First")

   //assign a function to global variable `start`
   start = function()
   {
      alert("start");
   }
}

first(); //when you invoke first, it creates the inner function and assigns its reference to the global `start` variable, which can then be invoked
start();

2）使用闭包，从外部函数返回一个命名函数：

function first()
{
   alert("First");

   var start = function()
   {
      alert("start");
   }

   return start;
}

3）上面稍有不同，从外部函数返回一个匿名函数：

function first()
{
   alert("First");

   return function()
   {
      alert("start");
   }
}

在上面的（2）和（3）中，当你第一次调用函数时，它会发出警告First，然后它会返回一个你可以立即执行的函数或者为一个变量执行延迟执行的函数。例如：

first()(); //alerts `First`, which returns a function reference, which reference is executed right away, to the alert `start`

//alerts `First`, then assigns returned function to the variable `start`
var start = first(); //`start` now holds a function reference which you can execute anytime, like so:

start(); //alerts `start`

最后，作为快速提醒，强烈建议您使用event-listeners为元素分配事件，而不是直接在元素中使用onclick或onwhatever属性。这也符合principle of separation of concerns。

接下来，更新的代码应如下所示：

HTML

<input id="start" value="start" type="button"><!-- notice no `onclick` attribute attached to it -->

使用Javascript：

将click事件监听器附加到按钮

var startBtn = document.getElementById("start");
if (typeof startBtn.addEventListener === "function")
{
    startBtn.addEventListener("click", function(){first()()}, false);
}
else if (typeof startBtn.attachEvent === "function")
{  
    startBtn.attachEvent("onclick", function(){first()()}); 
}
else 
{
    startBtn.onclick = function(){first()()}
}

Answer 3

function关键字使其名称在其定义的函数的本地名称。从HTML属性调用的函数必须是全局的。

然后，您必须先致电first()，然后才能致电start()。

var start;

function first() {
  alert("First");
  start = function() {
    alert("Start");
  };
}

first();

<input id="start" value="start" type="button" onclick="start()">

Answer 4

为什么不启动全局函数来从任何地方调用它，即使是从你的第一个函数开始：

var start = function(){
        alert("start");
    },
    first = function(){
        alert("first");
        start();
    };

如何从html文档中调用其他函数中的函数--JavaScript。

4 个答案: