this.innerHTML做工精细如果出现在HTML按钮，但如果保存在单独的javascript函数不工作

问题描述：

我有以下代码：this.innerHTML做工精细如果出现在HTML按钮，但如果保存在单独的javascript函数不工作

<!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>

这是什么原因？

答

您的this不是指button本身，它在function范围内。你可以用很多方法达到预期的效果。

1）你可以通过此所述功能作为一个参数

function displayDate(context){ 
 
    context.innerHTML = Date(); 
 
}

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

2）使用显式绑定，像call或apply

function displayDate(){ 
 
    this.innerHTML = Date(); 
 
}

<button onclick="displayDate.call(this)">The time is?</button>

您应该使用在代码编辑器的单独的HTML和JS盒。 – Barmar

如果这可以帮助你，接受它，并帮助他人找到它 –

答

你可以尝试做这样的事情

<!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>

删除代码块中的“你可以尝试做这样的事情” – Sonevol

this.innerHTML做工精细如果出现在HTML按钮，但如果保存在单独的javascript函数不工作

相关推荐