Get variable of Class inside onclick function

Question

I'm getting a problem where I cannot access the national variables of a Class inside the onclick function of another variable of the same Class. I have made a small demo where I assign a message and return a button which should show the message, but it keeps printing undefined because it can't find the variable. Please Help

class class1 {
  message = "";
  clicker = document.createElement("button");
  
  constructor(sentence) {
    this.message = sentence;
    this.clicker.id = "clicker";
    this.clicker.innerHTML = "CLICK ME";
    this.clicker.addEventListener("click", (function () {
        console.log(this.message);
    }).bind(this))
    return this.clicker;
  }
}

document.getElementById("content").appendChild(new class1("hello"));

<html>
<head>
  <title></title>
</head>
<body>
  <div id='content'></div>
</body>
</html>

Ele · Accepted Answer · 2019-04-19 02:16:04Z

2

The function is bound with the HTML element who triggered the event, you can either use arrow functions or bind the desired specific lexical context.

Using arrow functions.

class class1 {
  message = "";
  clicker = document.createElement("button");
  
  constructor(sentence) {
    this.message = sentence;
    this.clicker.id = "clicker";
    this.clicker.innerHTML = "CLICK ME";
    this.clicker.onclick = () => {
      console.log(this.message);
    }
    return this.clicker;
  }
}

document.getElementById("content").appendChild(new class1("hello"));

<html>
<head>
  <title></title>
</head>
<body>
  <div id='content'></div>
</body>
</html>

Binding

class class1 {
  message = "";
  clicker = document.createElement("button");
  
  constructor(sentence) {
    this.message = sentence;
    this.clicker.id = "clicker";
    this.clicker.innerHTML = "CLICK ME";
    this.clicker.onclick = (function() {
      console.log(this.message);
    }).bind(this)
    return this.clicker;
  }
}

document.getElementById("content").appendChild(new class1("hello"));

<html>
<head>
  <title></title>
</head>
<body>
  <div id='content'></div>
</body>
</html>

edited Apr 19, 2019 at 2:16

answered Apr 19, 2019 at 2:11

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

2 Comments

aman Over a year ago

how will you write this in the form of this.clicker.addEventListener("click", funtion(){});

aman Over a year ago

I updated the snippet in my question, and I'm getting an error

Collectives™ on Stack Overflow

Get variable of Class inside onclick function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related