另一个烦人的JavaScript点击事件问题

Question

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

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

Why is this not working? Nothing happens to the div id="page" when I click the div id="home" element.

Note: This is plain Javascript linked between script tags in a .js document

Edit: I tried using the Event Listener method.

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

ALL THE HTML HERE

";
});

Still, nothing happens to the div id "page" when the div id "home" is clicked. Tried running in IE and Chrome.

Answer 1

See the below example it runs perfectly.

But remember the element should be loaded before the event listener is attached.

I would recommend you put the below code at the bottom of the page like after closing the body tag.

Or calling the code on the document onload like so:

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

This is plain Javascript linked between script tags in a .js document

If it is a .js document, there is no need of <script></script> tag.

Try the below code snippet:

  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> 

You should concatenate your text to the element's innerHTML instead of assigning.