dynamically create element with onclick

Question

I'm obviously missing something, but I haven't been able to find what I am doing wrong and I have been staring at this for entirely too long

function message(options) {
  ...
  options.onclose = options.onclose || null;
  ...
  this.gui = document.createElement('div');
  this.msg = document.createElement('div');
  ...
  if (options.onclose != null) {
    var close = document.createElement('i');
    close.innerHTML = 'close';
    close.className = 'material-icons close';
    close.onclick = options.onclose;
    console.log(close.onclick);
    this.msg.append(close);
  }

  this.msg.innerHTML += options.msg;
  this.gui.append(this.msg);
  ...
  return this.gui;
}

msgContainer.append(new message({
    class: 'update',
    sticky: true,
    icon: 'mic',
    msg: 'You are in a call',
    onclose: () => { console.log('click'); }
  }));

from the developer console document.querySelector('.close').onclick is null , but if I add an on click document.querySelector('.close').onclick = () => { console.log('click'); }; document.querySelector('.close').onclick = () => { console.log('click'); }; it works?

Answer 1

Why it wont work is because on click is a function:

document.querySelector('.close').onclick

doesn't do anything so why call it.

document.querySelector('.close').onclick = () {
     alert("did something");
}

so the real question is what do you want to do when clicked? create a new link or div.. look below. I would start using jQuery.

jQuery answer:

$(document).ready(function(){
     $(".myclass").click(function(){
          $(".container_div").append("<a href='test.php'>test link</a>");
          // also .prepend, .html are good too
     });

});

Answer 2

Here is working example. I changed your code a little bit. You can add more events by passing it to an array. I used addEventListener.

 var msgContainer = document.getElementById('msgContainer'); function message(options) { options.onclose = options.onclose || null; this.gui = document.createElement('div'); this.msg = document.createElement('div'); if (options.onclose != null) { var close = document.createElement('i'); close.innerHTML = 'closepp'; close.className = 'material-icons close'; close.dataset.action = 'close'; this.msg.append(close); } this.msg.innerHTML += options.msg; this.gui.append(this.msg); // Create listeners dynamically later on events = [ { selector: close.dataset.action, eventType: 'click', event: options.onclose } ]; renderElement(this.gui, events); } function renderElement(element, events) { msgContainer.append(element); for (i = 0; i < events.length; i++) { var currentEvent = events[i]; var selector = element.querySelector('[data-action="' + currentEvent['selector'] + '"]'); selector.addEventListener(currentEvent['eventType'], currentEvent['event'].bind(this), false); } } new message({ class: 'update', sticky: true, icon: 'mic', msg: 'You are in a call', onclose: () => { console.log('click'); } }); 

 <div id="msgContainer"> </div> 

Answer 3

I finally figured it out! setting innerHTML makes chrome rebuild the dom and in the process it loses the onclick event, onclick works fine if I use textContent instead of innerHTML. In the below example if you comment out the last line of JS the onclick works, here's the same thing in jsFiddle

var blah = document.getElementById('blah');
var div = document.createElement('button');
div.style['background-color'] = 'black';
div.style.padding = '20px;';
div.style.innerHTML = 'a';
div.onclick = () => { alert('wtf');};

blah.appendChild(div);

// Uncomment this to make onclick stop working
blah.innerHTML += ' this is the culprit';

<div id="blah">
</div>