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);

                  };

Answer 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)

Answer 2

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" />