另一個惱人的JavaScript的單擊事件問題

Question

var Home = document.getElementById("home"); 
var Page = document.getElementById("page"); 

Home.onclick = function(){Page.innerHTML = "I TYPED A BUNCH OF HTML HERE";}; 

這是爲什麼不工作？當我點擊div id =「home」元素時，div id =「page」沒有任何反應。

注：這是普通的JavaScript腳本標記之間的.js文件鏈接

編輯：我嘗試使用事件監聽器的方法。

Home.addEventListener("click", function(){Page.innerHTML = " 

ALL THE HTML HERE 

"; 
}); 

但是，當div id「home」被點擊時，div id「page」沒有任何反應。 嘗試在IE和Chrome中運行。

Answer 1

看到它完美地運行在下面的例子。連接事件監聽器之前

但要記住的元素應該被加載。

我會建議你把下面的代碼在頁面的底部，如關閉body標籤之後。

或致電像這樣的文件的onload代碼：

document.addEventListener("load", function(){ 
    //ATTACH THE CLICK LISTENER HERE  
}); 

var Home = document.getElementById("home"); 
 
Home.onclick = function(){ 
 
    alert("click happened"); 
 
};

<div id="home">This is the div with id home</div>

Answer 2

這是普通的JavaScript腳本標記之間的.js文件鏈接

如果它是一個.js文件，不需要<script></script>標籤。

嘗試下面的代碼片段：

var Home = document.getElementById("home"); 
 
var Page = document.getElementById("page"); 
 
    
 
Home.onclick = function(){ 
 
Page.innerHTML = "I TYPED A BUNCH OF HTML HERE"; 
 
};

<div id="home"> Home </div> 
 
    <div id="page"> </div>

你應該串聯文本的元素的innerHTML而不是分配的。