why append is not working? this.append is not a function

Question

When I drag and drop the green box into another col I get this error:

this.append is not a function

Why?

const cols = document.getElementsByClassName('col')
const item = document.querySelector('.item')

for (const col of cols) {
  col.addEventListener("dragover", (e) => {
    e.preventDefault()
  })
  col.addEventListener("drop", () => {
    alert(this)
    this.append(item)
  })
}

<div class="col">
  <div draggable="true" class="item"></div>
</div>
<div class="col"></div>
<div class="col"></div>

If you want `this` within the call to the handler to be set by the DOM, don't use an arrow function. Arrow functions *close over* `this`, they don't get it set by how they're called like traditional functions do. See the linked question for details. — T.J. Crowder, Dec 21 '19 at 12:59

score 1 · Accepted Answer · answered Dec 21 '19 at 12:57

Arrow (=>) function expressions

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

Use normal function syntax instead.

const cols = document.getElementsByClassName('col')
const item = document.querySelector('.item')

for (const col of cols) {
  col.addEventListener("dragover", (e) => {
    e.preventDefault()
  })
  col.addEventListener("drop", function() {
    alert(this)
    this.append(item)
  })
}

body {
  background: #ccc;
}
.item {
  background: #6dc06d;
  width: 50px;
  height: 50px;
  margin: 10px;
}
.col {
  float: left;
  width: 70px;
  height: 70px;
  background: white;
  margin: 10px;
}

<div class="col">
  <div draggable="true" class="item"></div>
</div>
<div class="col"></div>
<div class="col"></div>

why append is not working? this.append is not a function

1 Answers1