javascript - onclick 在外部 js 文件中不起作用，但在内联中

Question

我想要什么<h1>：在标签中的文本上将文本颜色更改为红色<id="headline">

任何人都知道为什么以下代码不起作用，但在这个问题的更下方，该代码通过将 onclick-event 移动到内联代码来工作？

不起作用：以下代码用外部 js 文件编写

function changeColor(){
    document.getElementById("headline").style.color = "red";
}

document.getElementById("headline").onclick = changeColor;

作品：以下用外部js文件编写的代码（功能相同）：

function changeColor(){
    document.getElementById("headline").style.color = "red";
}

......这是用内联代码编写的：

<h1 id="headline"  onclick="changeColor()">with inline code this text change color on click</h1>

score 5 · Accepted Answer

在没有看到更多代码的情况下，我假设您正在创建并绑定该函数，该函数是在您的 HTMLchangeColor()中加载的 javascript 文件中。<head>

如果是这样，则带有 id 标题的元素尚不存在（在 HTML 完全加载之前正在处理 javascript 文件），因此您正在尝试绑定到不存在的元素。

如果是这种情况，请将您的脚本包含移动到<body>元素的底部，或者将绑定包装在这个 jsFiddlewindow.onload中看到的函数中。

1 回答 1