Question

我在w3school上获得了以下代码：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

这很好用。现在为了练习，我希望通过外部js文件来实现。我的代码如下 Html：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

<button >Try it</button>


<p id="demo"></p>
<script src="function.js"></script>
</body>
</html>

我的js文件：

function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
onclick='displayDate()';

但上面的代码不起作用。我该怎么办呢。

Answer 1

通常使用按钮上的ID来完成。为了确保在执行脚本时加载DOM，它将在加载处理程序中完成。

HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="function.js"></script>
</head>
<body>

   <p>Click the button to execute the <em>displayDate()</em> function.</p>

   <button id="myButton">Try it</button>

   <p id="demo"></p>

</body>
</html>

function.js：

function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}

window.onload = function() {
    var btn = document.getElementById("myButton");
    btn.onclick = displayDate;
}

Answer 2

<!DOCTYPE html>
<html>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

<button id="try it" onclick='displayDate()' >Try it</button>


<p id="demo"></p>
<script src="function.js"></script>
</body>
</html>

js file

    function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}

如何在外部javascript文件中使用onclick

2 个答案: