onclick不能在外部js文件中工作，但在內聯中

Question

我想要的 ：使用<id="headline">將<h1>標簽中的文本顏色更改為紅色

任何人都知道為什么以下代碼不起作用，但在這個問題中，通過將onclick-event移動到內聯代碼，該代碼可以工作？

不起作用 ：遵循外部js文件編寫的代碼

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

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

Works ：以下代碼用外部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

在沒有看到更多代碼的情況下，我會假設您正在創建並綁定在HTML的<head>中加載的javascript文件中的changeColor()函數。

如果是這樣，具有id標題的元素尚不存在（在HTML完全加載之前正在處理javascript文件），因此您嘗試綁定到不存在的元素。

如果是這種情況，請將腳本include移動到<body>元素的底部，或者將綁定包裝在window.onload函數中，如此jsFiddle中所示。