2

Eu quero, por meio de um script (Javascript puro e simples), alertar após o click em um determinado link (da classe "sair") o seguinte: "Você está saindo do site".

Meu script está assim:

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

A classe "sair" está no trecho de marcação HTML, abaixo:

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

Quando aciono o link, ele não alerta absolutamente nada.

Observação

Tentei com o script:

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

E, também não funcionou.

O que está errado?!

Desde já, grato,

Alexandre Soares

2
  • Você tá chamando a classe botao sair no HTML (class="botao sair"), e usando .sair (.'sair').onclick) no javascript. Pelo menos um dos problemas deve ser este (testei aqui mudando e mesmo assim não abriu). Mas daqui a pouco alguém aparece com a solução. :-)
    – gustavox
    Commented 19/06/2015 às 21:35
  • Obrigado, Gustavo! Commented 19/06/2015 às 21:40

1 Resposta 1

1

Se tens mais do que um link, vejo que estás a usar o querySelectorAll, então tens de usar um ciclo for para adicionar o oscultador de eventos a cada elemento. Isto porque o querySelectorAll dá uma lista de elementos (tipo Array).

Algo assim:

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/

Podes também usar a tua sintaxe links[i].onclick = aviso; (jsFiddle)

Se tiveres somente um elemento tens de usar o querySelector (sem o All) e aí o teu código já funciona, ou seja não precisas do ciclo for.

9
  • É verdade, tem mais de um link no site, sim. Tentei o seu script e nada aconteceu também, amigo. Substitui o "var links = document.querySelectorAll('.sair');" por "var links = document.getElementsByClassName('sair');", infelizmente, sem sucesso. Obrigado, assim mesmo, por sua sugestão, Sérgio. Engraçado que em teoria está tudo certo. Inspecionei com o "Developer Tools" do Chrome e ele não apresentou nenhum erro na construção dos scripts. Vai saber...!... Commented 19/06/2015 às 21:59
  • @AlexandreSoares não estás a usar mesmo asteriscos aqui 'querySelectorAll(.**sair*');*"pos não?
    – Sergio
    Commented 19/06/2015 às 22:00
  • Tens esse script onde na página? no <head> ? <body>?
    – Sergio
    Commented 19/06/2015 às 22:01
  • Não usei os asteristicos, não. Estava tentando formatar o comentário, apenas. O script está local, no HEAD, mesmo. Pois estou testando. Commented 19/06/2015 às 22:05
  • 1
    Agora está OK! Muito grato, Sérgio! Você é um crânio! Está perfeito! Forte abraço, Alexandre Commented 19/06/2015 às 22:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .