Cannot read property 'target' of undefined - HTML buttons

Question

Why am I getting this error?

Cannot read property 'target' of undefined
  at btn

I declare btn() in my html file. I have multiples buttons in the html invoking btn().

function btn(event){        
  var theTarget = event.target;
  alert(theTarget.tagName);
}

Answer 1

Suggests that the event parameter has not been set (i.e. is undefined) when the btn(...) method was called.

You should verify that event is set whenever the code tries to use that method.

It might also be safer to not use event as the parameter name in your function - this might cause problems (i.e. it's apparently a global variable in IE). Try changing it to myEvent?

Answer 2

There are a few options for how to do this, and each behaves differently.

Option 1 Set onclick="btn(this)" on the button. This always passes the button itself as the argument. The other options pass an event as opposed to the element itself.

function btn(elem) {
  var theTarget = elem;
  console.log(theTarget.id);
}

<p>
  Option 1:
  <button id="the-button" onclick="btn(this)">
    btn(this)
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>

Option 2 Set onclick="btn(event)" on the button. This passes the event, and event.target will be element that is clicked. For example, an event referencing a span inside the button would be passed if it was clicked.

function btn(evt) {
  var theTarget = evt.target;
  console.log(theTarget.id);
}

<p>
  Option 2:
  <button id="the-button" onclick="btn(event)">
    btn(event)
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>
</p>

Option 3 Set an id attribute for the button. Then bind an event handler to the button with JavaScript. This behaves like option 2 with respect to the way child elements are referenced by the event.

function btn(evt) {
  var theTarget = evt.target;
  console.log(theTarget.id);
}

document.getElementById('the-button').onclick = btn;

<p>
  Option 3:
  <button id="the-button">
    binding
    <span id="the-span" style="border: 1px solid red">This is a span</span>
  </button>
</p>

Here is a snippet with all three options in one program:

function btn(evt) {
  var theTarget = evt.target || evt;
  console.log(theTarget.id);
}

document.getElementById('third-button').onclick = btn;

<p>
  Option 1:
  <button id="first-button" onclick="btn(this)">
    btn(this)
    <span id="first-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

<p>
  Option 2:
  <button id="second-button" onclick="btn(event)">
    btn(event)
    <span id="second-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

<p>
  Option 3:
  <button id="third-button">
    binding
    <span id="third-button-SPAN" style="border: 1px solid red">This is a span</span>
  </button>
</p>

Answer 3

Note: When we call the function from the HTML we get the button directly i.e. the target.

With binding we get event

function btn(event){        
    var theTarget = event.target || event;
    alert(theTarget.tagName);
}

document.querySelector('#boundEvent').onclick = btn;

<!-- In this way we are passing the button directly. -->
<button onclick="btn(this);">Direct call</button>
<!-- When we bind in our code (Best way) we will get an event object. --> 
<button id="boundEvent">Bound Event</button>

Answer 4

By default function takes arguments values as undefined in JavaScript so I wish you have forgotten to pass event to handler function i.e. to btn().

A best simple example to understand this concept would be https://www.w3schools.com/jsref/event_target.asp

So instead of calling like onclick=btn() or onclick=btn(this), prefer onclick=btn(event), the correct one otherwise undefined will be taken as default value.