The reason is this refers to the global Window object inside the function.

You have to pass this to the function so that you can refer that inside the function:

.active{
  color:green;
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" onClick="TestFunction(this);">Click</div>

<script>
function TestFunction(el) {
  console.log(this.constructor.name) //Window
  $(el).addClass('active');
}
</script>

Though it is better to avoid inline event handler:

$('.class1').click(function(){
  $(this).addClass('active');
});

.active{
  color:green;
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">Click</div>

When using an inline handler the function invoked runs under the scope of the window element, not the element which raised the event. To work around that you can pass this as an argument:

<div class="class1" onClick="TestFunction(this);">Click</div>

function TestFunction(el) {
  el.addClass('active');
}

However this is not good practice. Inline event attributes are outdated and now considered bad practice. The better way to achieve this is to attach unobtrusive event handlers. In plain JS it would look like this:

<div class="class1">Click</div>

document.querySelectorAll('.class1').forEach(el => {
  el.addEventListener('click', function() {
    this.classList.add('active');
  });
});

In jQuery it would look like this:

<div class="class1">Click</div>

jQuery($ => {
  $('.class1').on('click', function() {
    $(this).addClass('active');
  });
});

By triggering an onClick event I would like to select the same element the onClick event is attached to, to add a class to that same element. What I tried is the following:

<div class="class1" onClick="TestFunction();">Click</div>
<script>
  function TestFunction() {
    $(this).addClass('active');
  }
</script>

After clicking the div, the class “active” should be added to the same element, resulting in…

<div class="class1 active" onClick="TestFunction();">Click</div>

However this doesn’t work. I am wondering whether the this selector works differently in this case.

The structure of the div element should stay the same and also the function should stay in the same place as it is on the onClick attribute.