deleteSong.onclick = (this)=>{ this.removeWidget(this) }

Я хочу, чтобы параметр this в removeWidget(this) был привязан к HTMLElement "this", а не к моему классу "this"

Учебный класс:

class Collection{

createElements(){
    let deleteSong = document.createElement('button');
    deleteSong.className += 'delete-song';
    deleteSong.setAttribute('type', 'button');
    deleteSong.onclick = (this)=>{ this.removeWidget(this) }
    deleteSong.innerHTML = '✕';
 }
}

Для большей ясности я пытаюсь добиться чего-то вроде

<button onclick="myFunction(this)">Click me</button>. Где 'this' вернет объект HTMLElement

0
Lil boat 14 Сен 2020 в 22:10

2 ответа

Лучший ответ

Ваша основная проблема заключается в том, что вы помещаете this в аргумент функции и, следовательно, переопределяете this. Просто измените его на что-нибудь другое, чтобы когда вы на самом деле имели в виду this, это было this.

Событие onclick уже передаст вам event в обратном вызове. Чтобы получить доступ к фактическому элементу, вы хотите использовать event.target

Примере:

class Collection {

  createElements() {
    let deleteSong = document.createElement('button');
    deleteSong.className += 'delete-song';
    deleteSong.setAttribute('type', 'button');
    deleteSong.onclick = (e) => { // <- dont use 'this' here.
      this.removeWidget(e.target) // e.target is the html element
    }
    deleteSong.innerHTML = '&#10005;';
    document.getElementById('container').append(deleteSong); // append element
  }
  removeWidget(el) {
    console.log(el);
  }
}

const c = new Collection();
c.createElements();
<div id="container"></div>
1
mwilson 14 Сен 2020 в 19:21

Просто передайте событие в качестве параметра вместо этого ключевого слова. Что-то вроде этого даст вам необходимый элемент.

< Сильный > HTML:

<button onclick="myFunction(event)">Click me</button>

Файл JS / TS

deleteSong.onclick = (event)=>{ this.removeWidget(event.target) }
1
Saravan Somanchi 14 Сен 2020 в 19:27