Answered Add class on click?

[KittenKatja]

I'd like to add the class "clicked" to an <a> element on click.
this.class.add('clicked') & this.classList.add('clicked') do not work.

Bonus: I'd also like to know how to target all the children of an element.

 

[Antero360]

I'd like to add the class "clicked" to an <a> element on click.
this.class.add('clicked') & this.classList.add('clicked') do not work.

Bonus: I'd also like to know how to target all the children of an element.

That is because once the click event fires off, the 'this' keyword now references the event itself, not the object that triggered the event. To get to the object, you will need to access event.target...something to the effect of:

element.addEventListener('click', function(event){
    event.target.classList.add('clicked');
});

As far as your bonus question is concerned, you can target all the children elements of your target element by calling the .children operator on your target element. Something to the effect of

var myElement = document.querySelector('targetIdOrClass');
var kids = myElement.children;

 

[NoSpoonDude]

In addition to Antero360's answer

Or by binding:

element.addEventListener('click',
function(){
    this.classList.add('clicked');
}.bind(element));

And bonus simplification:

arrayOfElements = [...parentElement.querySelectorAll('childSelector')];

 

[KittenKatja]

I want to use it inside a function.
There is a way to target the element of the event, isn't it?

 

[NoSpoonDude]

I want to use it inside a function.
There is a way to target the element of the event, isn't it?

Yep, just as mr Antero360 suggested "event.target".
Yet you need to bear in mind, that in case your element may contain another element (icons for instance), the event.target may link to those elements.

 

[Ordep-20]

I want to use it inside a function.
There is a way to target the element of the event, isn't it?

you can use

<a onclick='yourFunction(this)'>