Why isn’t the code working?

Question

I want, by means of a script (Javascript pure and simple), alert after the click in a given link (class "get out of") The following: "You are leaving the site".

Man script is like this:

window.document.querySelectorAll('.**sair**').onclick = function aviso() {
     alert('Você está saindo do site.');
}; 

The class "get out of" is in the HTML markup section, below:

<p><a href="http://www.google.com" title="www.google.com" class="botao sair">Google</a></p>

When I activate the link, he alerts absolutely nothing.

Observing

I tried with the script:

window.document.getElementsByClassName('sair').onclick = function aviso() {
    alert('Você está saindo da página.'); 
 };

And it didn’t work either.

What is wrong?!

From now on, thank you,

Alexandre Soares

Answer 1

If you have more than one link, I see that you are using querySelectorAll, then you have to use a cycle for to add the event receiver to each element. This is because the querySelectorAll gives a list of elements (type Array).

Something like that:

var links = document.querySelectorAll('.sair');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', aviso);
}

function aviso(e) {
    alert('Você está saindo do site.');
};

jsFiddle: http://jsfiddle.net/f8mr69jt/

You can also use your syntax links[i].onclick = aviso; (jsFiddle)

If you have only one element you have to use querySelector (without the All) and then your code already works, that means you don’t need the cycle for.