How to add event listener with function callback in html inside a class?

Question

Imagine having a class that generates content on the page. Part of the content should have event listener attached in html such as onclick=function().

How can I make sure to call the function from within the class that constructed the html?

class Container {
  constructor(hook) {
    this.hook = "#" + hook;
    this.addDiv = this.addDiv.bind(this);
    this.fireMe = this.fireMe.bind(this);
    this.init = this.init.bind(this);
    this.init();
  }
  addDiv() {
    const div = `<div onclick="fireMe()">FIRE ME</div>`;
    document.querySelector(this.hook).innerHTML = div;
  }
  fireMe() {
    console.log("hello!");
  }
  init() {
    this.addDiv();
  }
}

let div = new Container("app");

now getting error that fireMe is undefined (which is right because it is not available in global scope).

I know I can add event listener by rendering the div first and than adding the event listener, but is there a way of adding event listener from within <div> tag to actually reach Container.fireMe() method?

Events inline in the `DOM` look for the function to be declared in the *global scope*. Use an event listener instead. Also, I'd suggest creating the `
` as an *element* instead of using an HTML string and `innerHTML`. — Tyler Roper, Jan 30 '19 at 14:56

d-h-e · Accepted Answer · 2019-01-30T15:11:45.383

3

You have to create the element -> something like this

class Container {
  constructor (hook) {
    this.hook = '#' + hook;
    this.addDiv = this.addDiv.bind(this);
    this.fireMe = this.fireMe.bind(this);
    this.init = this.init.bind(this);
    this.init();
  }

  addDiv () {
    const div = document.createElement('div');
    div.textContent = 'FIRE ME';
    div.addEventListener('click', this.fireMe );
    document.querySelector(this.hook).innerHTML = div;
  }

  fireMe () {
    console.log('hello!');
  }

  init () {
    this.addDiv();
  }
}

const div = new Container('app');

edited Jan 30 '19 at 15:11

answered Jan 30 '19 at 15:01

d-h-e

2,478
1
10
18

Because i am flexibler, if i want add parameter – d-h-e Jan 30 '19 at 15:04
1

God forbid treating functions like first class citizens ;) – Ryan Searle Jan 30 '19 at 15:04

Scott Marcus · Answer 2 · 2019-01-30T15:30:15.267

2

Never use inline event handlers as there are many reasons to avoid this 20+ year old technique that just will not die.

Instead, use modern, standards-based code with .addEventListener(). If you do this along with making the new HTML using the DOM API, you'll be able to more easily accomplish your goal:

addDiv() {
  const div = document.createElement("div");
  div.textConent = "FIRE ME";
  div.addEventListener("click", this.fireMe);
  document.querySelector(this.hook).innerHTML = div;
}

edited Jan 30 '19 at 15:30

answered Jan 30 '19 at 15:02

Scott Marcus

64,069
6
49
71

2

[Three guesses as to why it will not die... :)](https://www.w3schools.com/js/js_events.asp) – Jan 30 '19 at 15:04
1

@ChrisG Oh, I know. That's why I get on my soap box. – Scott Marcus Jan 30 '19 at 15:05

score 0 · Answer 3 · answered Jan 30 '19 at 15:04

You should create elements use document.createElement() rather than using string

class Container {
  constructor(hook) {
    this.hook = "#" + hook;
    this.addDiv = this.addDiv.bind(this);
    this.fireMe = this.fireMe.bind(this);
    this.init = this.init.bind(this);
    this.init();
  }
  addDiv(){
    const div = document.createElement('div');
    div.innerHTML = "Fire Me";
    div.addEventListener("click",this.fireMe);
    document.querySelector(this.hook).appendChild(div);
  }
  fireMe() {
    console.log("hello!");
  }
  init() {
    this.addDiv();
  }
}
let div = new Container("app");

`document.querySelector(this.hook).appendChild(div);` will add the node to the element, where the OP is replacing the current node with a new one. — Scott Marcus, Jan 30 '19 at 15:08

How to add event listener with function callback in html inside a class?

3 Answers3