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>

Answer 1

如果没有看到更多代码，我会假设您正在创建并绑定在changeColor() HTML中加载的javascript文件中的<head>函数。

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

如果是这种情况，请将脚本include移至<body>元素的底部，或将绑定包装在window.onload函数中，如this jsFiddle中所示。