HTML and JavaScript - How do you add a click event to a div

Question

I've been following examples but my fiddle isn't working. Here is the code:

  var showMessage;
  var divTag = document.getElementById("myDiv");
  divTag.onClick = showMessage();
  
  showMessage = function() {
      alert("You clicked me.");
  }

<div id="myDiv" style="height: 100px; width: 100px; background-color: pink;">

</div>

I'm probably missing something stupid but I cannot see it. I read out here that it is possible to put a click event on a div. Anybody know what I am doing wrong?

P.S. Yeah, I don't know how to decipher or fix the error.

You're assigning the return value of a function that doesn't return anything. — SLaks
– SLaks, Commented Nov 28, 2017 at 20:13

Intervalia · Accepted Answer · 2017-11-28 20:20:43Z

3

Change your JS to this:

function showMessage() {
  alert("You clicked me.");
}

var divTag = document.getElementById("myDiv");
divTag.addEventListener('click', showMessage);

Your code: divTag.onClick = showMessage(); was calling the response of the function showMessage instead of the function.

showMessage was called and its return value (undefined) is what you passed to the onClick property.

Minor issue: If you want this page to be used by Blind users that use a screen reader it would be better to use a <button> or an <a> tag. Either that or you need to emulate all of the things needed to get the screen readers to work correctly.

edited Nov 28, 2017 at 20:20

answered Nov 28, 2017 at 20:14

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

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

2 Comments

Ph0b0x Over a year ago

Here's a Fiddle with a solution like @Intervalia suggested: jsfiddle.net/kc5mor8j

Patricia Over a year ago

@Ph0b0x - Your fiddle is the only one that worked for me in JSFiddle.

Daniel Beck · Accepted Answer · 2017-11-28 20:14:07Z

1

You had several problems:

You defined "showMessage" as an empty variable, then tried to call it as a function, then defined it as a function.
onClick is not the same thing as onclick.
You invoked showMessage when trying to assign it to the onclick event, instead of assigning the function itself you ended up assigning its (empty) return value.

Here is the corrected version of your code:

  showMessage = function() {
      alert("You clicked me.");
  }

  var divTag = document.getElementById("myDiv");
  divTag.onclick = showMessage;

<div id="myDiv" style="height: 100px; width: 100px; background-color: pink;"></div>

That's vanilla JS. Since the question is also tagged "jQuery", here's the jQuery version of the same thing:

$('#myDiv').on("click",function() {alert("you clicked me")});

answered Nov 28, 2017 at 20:14

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

1 Comment

Patricia Over a year ago

I wish I could give you answer points too! But @Intervalia has a point. Maybe I should re-think what is clickable. Thank you.

JayB · Accepted Answer · 2017-11-28 20:15:04Z

1

Since you've tagged jQuery I'll just give you the jQuery solution:

$('#myDiv').click(showMessage);

But make sure you set the showMessage function before (above) that jQuery click event binding.

answered Nov 28, 2017 at 20:15

JayB

1,62910 silver badges11 bronze badges

Collectives™ on Stack Overflow

HTML and JavaScript - How do you add a click event to a div

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related