this.parentNode not working inside a dom

Question

getSelection = () => {
  console.log("this", this); //valid but empty json
  console.log("this.parentNode", this.parentNode); //<=undefined
}
document.querySelector('i.edit').addEventListener('click', getSelection, false);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="control-group">
  <label for="name" class="control-label">
          <p class="text-info">Alex<i class="icon-star"></i> </p>
        </label>
  <input type="text" class="edit-input" />
  <i class="fa fa-pencil edit" aria-hidden="true"></i>
</div>

Have you read my answer, don't use arrow function as it does not have its own `this` — Satpal, Jul 02 '18 at 08:21
there is no way to figure out from the error that this is due to arrow function, only people already familiar with how events are passed to arrow functions can catch it, so it will be needed for people looking for the same issue in future, so tagging duplicate is most appropite thing to do. Thanks for deleting the answer though. — ishandutta2007, Jul 04 '18 at 03:20

score 3 · Accepted Answer · answered Jul 02 '18 at 08:22

As you use an arrow function, your this doesn't refer to the object.

Use the event.target property

    <div class="control-group">
      <label for="name" class="control-label">
              <p class="text-info">Alex<i class="icon-star"></i> </p>
            </label>
      <input type="text" class="edit-input" />
      <i class="fa fa-pencil edit" aria-hidden="true">edit</i>
    </div>

    <script>
      getSelection = (e) => {
        //console.log("this", this); //valid but empty json
        console.log("e.target.parentNode", e.target.parentNode); //<=undefined
      }
      document.querySelector('i.edit').addEventListener('click', getSelection, false);
    </script>

this.parentNode not working inside a dom

1 Answers1