Create div with on click-function(plain Java Script)

Question

I created a div with js (var div = document.createElement("div");). Now I want to insert a onclick-function after the div is created. For some reason The onclick-function is triggerd when I click just the playfield.

var create_divs = function(check_if_right_div){
                  var random_class = Math.floor((Math.random() * 5) + 1);
                  var id = div_id += 1;
                  var random_position = 0 + 100*Math.floor(Math.random()*6);
                  var div = document.createElement("div");

                  div_id_selection.push('div' + id);


                  div.className = 'class'+random_class;
                  div.id = 'div' + id;
                  div.style.left = random_position;
                  div.addEventListener("click",check_if_right_div(div));//the function is triggered when I click the playfield, which is a big div that contains the other divs


                  document.getElementById('play_field').appendChild(div);
                  
                  
                  var check_if_right_div = function(div_to_check){
                                           var div_class =div_to_check.className;
                                             console.log(div_class);

                  };

What do you think check_if_right_div(div) does?

Niet the Dark Absol
– Niet the Dark Absol

2017-04-13 19:56:24 +00:00
Commented Apr 13, 2017 at 19:56 — Niet the Dark Absol
– Niet the Dark Absol, Commented Apr 13, 2017 at 19:56
Can you provide your mark up?

Jitu Raiyan
– Jitu Raiyan

2017-04-13 20:09:45 +00:00
Commented Apr 13, 2017 at 20:09 — Jitu Raiyan
– Jitu Raiyan, Commented Apr 13, 2017 at 20:09

genichm · Accepted Answer · 2017-04-13 20:21:11Z

1

You need to do it this way

div.onclick = function(){ 
   check_if_right_div(div); 
};

when you do this check_if_right_div(div) it's function execution, it means that by making this div.addEventListener("click",check_if_right_div(div)); you executing function check_if_right_div(div)

answered Apr 13, 2017 at 20:21

genichm

5457 silver badges20 bronze badges

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

Comments

Xotic750 · Accepted Answer · 2017-04-13 20:36:19Z

The code that you provided is incomplete. However, EventTarget.addEventListener is the modern and preferred method for adding a listener to an element.

Notes

Why use addEventListener?

addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:

It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that
need to work well with other libraries/extensions.

It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling).

It works on any DOM element, not just HTML elements.

const playField = document.getElementById('play_field');
const div = document.createElement('div');
div.id = 'myDiv';
div.className = 'myClass';
const onClickHandler = event => console.log(event.target.className);
div.addEventListener('click', onClickHandler, false);
playField.appendChild(div);

.myClass {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="play_field" />

Collectives™ on Stack Overflow

Create div with on click-function(plain Java Script)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related