Want to make an empty <div> element clickable via JavaScript (no jQuery)

Question

I am trying to make two empty <div> elements clickable through the use of HTML and Javascript alone. No jQuery. I have this HTML document...

<!DOCTYPE html>
<html>
<head>
   <title>whatever</title>
   <link rel="stylesheet" href="css_squares" media="screen" >
   <script src="lala.js"></script>
</head>

<body>
   <h1>Clickable Squares</h1>

   <div id="top_square" onclick="alert('Top square clicked')">
   </div>

   <div id="bottom_square">
   </div>
 </body>
 </html>

and also have this simple CSS...

#top_square {
width: 50px;
height: 50px;
background-color: #01FF55;  
}

#bottom_square {
width: 150px;
height: 150px;
background-color: #AB877F;
}

I want to make both squares create an alert box when clicked. The top square already achieves this through the HTML code, but I am unable to get the bottom square to create a similar alert through Javascript code. This is what I have tried...

window.onload = init;
function init() {
   alert("you have successfully loaded an external .js file.");
   // this is just to check that lala.js is loading.

   var bottom_sqr = getElementById("bottom_square");
                   // I also tried calling 'document.getElementById'...

   bottom_sqr.onclick = handle_bottom_click;

   function handle_bottom_click() {
      alert('Bottom square clicked');
   }

This is not working at all... hence the post obviously. Any help would be greatly appreciated.

bcr · Accepted Answer · 2016-10-17 14:59:36Z

4

You're missing a closing bracket on your init method and yes, document is required there. window is javascript's global object and no method window.getElementById exists:

function init() {
    alert("you have successfully loaded an external .js file.");
    // this is just to check that lala.js is loading.

    var bottom_sqr = document.getElementById("bottom_square"); // document is required here

    bottom_sqr.addEventListener('click', handle_bottom_click);

    function handle_bottom_click() {
        alert('Bottom square clicked');
    }
}

Since an HTMLElement isn't "clickable" by default, you need to attach an event listener with addEventListener instead of just element.onclick.

Edit: Apparently element.onclick is valid as onclick is a global event handler.

edited Oct 17, 2016 at 14:59

answered Oct 17, 2016 at 14:23

bcr

3,82120 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shawon191 · Accepted Answer · 2016-10-17 14:49:19Z

0

This code works

var v = document.getElementById("bottom_square");
v.onclick = function(){
    alert("Bottom square clicked");
};

JSFiddle link - https://jsfiddle.net/41Ljp1w7/

The problem in your code is aside from missing closing bracket in init method and document selector, you are calling functions without using first brackets i.e. "window.onload = init;" instead of "window.onload = init()"

answered Oct 17, 2016 at 14:49

shawon191

1,96516 silver badges28 bronze badges

3 Comments

bcr Over a year ago

window.onload = init() will call the return value of init on page load instead of correctly calling init on page load.

HiSulu Over a year ago

Yes. That was the first teething problem I ran into when trying to get this to work. Thanks for quick response btw. All is good now!

HiSulu Over a year ago

window.onload = init();

Collectives™ on Stack Overflow

Want to make an empty <div> element clickable via JavaScript (no jQuery)

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related