Блог

Главная - Вопросы по программированию - Получить переменную класса внутри функции onclick

Получить переменную класса внутри функции onclick

#javascript

#javascript

Вопрос:

У меня возникает проблема, когда я не могу получить доступ к национальным переменным класса внутри onclick функции другой переменной того же класса. Я сделал небольшую демонстрацию, в которой я назначаю сообщение и возвращаю a button , которое должно отображать сообщение, но оно продолжает печатать undefined , потому что не может найти переменную. Пожалуйста, помогите

 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>

Ответ №1:

Функция привязана к элементу HTML, который вызвал событие, вы можете либо использовать функции со стрелками, либо привязать нужный конкретный лексический контекст.

Использование функций со стрелками.

 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>

Привязка

 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>

Комментарии:

1. как вы напишете это в виде this.clicker.addEventListener("click", funtion(){});

2. Я обновил фрагмент в своем вопросе, и я получаю сообщение об ошибке

Метки: