Pure JavaScript equivalent of JQuery $(this)

Question

I am giving a simple example of jQuery code below:

$(".black").on("click", function() {
    $(this).css("color", "red");
});

When an element with 'black' css class is clicked, the particular element's (this) color turns to red.

Now, how the above code can be written in pure JavaScript? Please tell me the JavaScript equivalent of Jquery $(this) when it is used against a class selector.

Answer 1

var blacks = document.getElementsByClassName('black');

for(var i =0; i< blacks.length; i++){
    blacks[i].onclick = function(){ 
        this.style.color = 'red';
    }
}

  var blacks = document.getElementsByClassName('black');
    
    for(var i =0; i< blacks.length; i++){
        blacks[i].onclick = function(){ 
            this.style.color = 'red';
        }
    }

<div class="black">test</div>
<div class="black">test</div>
<div class="black">test</div>