Question

我有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>

这很好。

但如果我尝试通过创建单独的JavaScript函数来做同样的事情，那么代码就无法运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>

    <button onclick=displayDate()>The time is?</button>

    <script>
        function displayDate(){
            this.innerHTML=Date();
        }
    </script>
</body>
</html>

这是什么原因？

Answer 1

当this范围内的button function时，function displayDate(context){ context.innerHTML = Date(); }不会引用<button onclick="displayDate(this)">The time is?</button>本身。您可以通过多种方法达到预期的效果。

1）您可以将此作为参数传递给函数

＆＃13;

call

＆＃13;

apply

＆＃13;

2）使用显式绑定，例如function displayDate(){ this.innerHTML = Date(); }或<button onclick="displayDate.call(this)">The time is?</button>

＆＃13;

GET https://account.vsrm.visualstudio.com/project/_apis/Release/releases/$(Release.ReleaseId)

＆＃13;

preDeployApprovals

＆＃13;

Answer 2

您可以尝试做类似的事情

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button id="test" onclick=displayDate()>The time is?</button>
  <script>
    function displayDate(){
      document.getElementById("test").innerHTML=Date();
    }
  </script>
</body>
</html>

this.innerHTML工作正常，如果存在于HTML按钮中，但如果保存在单独的javascript函数中则无法正常工作

2 个答案: