This question is related to another [question on SO](https://stackoverflow.com/questions/53273768/javascript-onclick-function-only-works-once-very-simple-code). I am not rephrasing it so please read that first.

In solving the above problem I encountered a behaviour that is unknown to me. 

This snippet works:

```js
var bt1;
document.addEventListener('DOMContentLoaded', load);

function load() {
  document.body.innerHTML += '<div>welcome</div>';
  bt1 = document.getElementById('bt1');
  bt1.onclick = clicked;
}

function clicked(a) {
  document.body.innerHTML += '<div>welcome</div>';
  // getting the button from document.getElement method
  bt1 = document.getElementById('bt1');
  bt1.onclick = clicked;
}
```

```html
<body>
  <button id="bt1">Click Me</button>
</body>
```

While this doesn't:

```js
var bt1;
document.addEventListener('DOMContentLoaded', load);

function load() {
  document.body.innerHTML += '<div>welcome</div>';

  bt1 = document.getElementById('bt1');
  bt1.onclick = clicked;
}

function clicked(a) {
  document.body.innerHTML += '<div>welcome</div>';
  // getting the button from event.target
  var b = a.target;
  b.onclick = clicked;
}
```

```html
<body>
  <button id="bt1">Click Me</button>
</body>
```

Any insights would help to clear the concepts.