1

Tenho um calendário onde todos os dias são:

<a class="dia" href="#">(Número do dia, ex: 1, 2, 3, etc)</a>

Aí preciso que sempre que a class "dia" for clicada ela chame uma função, por exemplo a função teste().

Fiz esse abaixo, mas o problema é que só consigo escolher 1 class, quero que funcione com qualquer uma:

<a class="dia" href="#">1</a>
<a class="dia" href="#">2</a>

<script>
document.getElementsByClassName("dia")[0].onclick = function() {teste()};
function teste() {
    alert("Deu Certo!");
}
</script>

3 Respostas 3

5

Para selecionar todos os elementos de uma determinada classe, você pode usar a função querySelectorAll() que retornara um array com todos os elementos <a> que possuirem a condição informada, por exemplo:

var dias = document.querySelectorAll('.dia'); 
// Seleciona tudo que tiver a classe dia

Agora com os elementos capturados você precisará adicionar o evento click em cada um, para isso você pode utilizar a função forEach() para passar por cada elemento dentro da variavel dias e adicionar o eventListener de click:

function handleClick (event) {
    console.log('clicked');
}

dias.forEach(function(item){
    item.addEventListener('click', handleClick, {once: false});
});
2
  • Funcionou, mas não completamente no calendario que estou usando, por algum motivo no calendario ele só funciona o primeiro clique, depois não funciona mais. 12/07/2017 às 18:08
  • Incrementei a resposta veja se funciona.
    – RFL
    12/07/2017 às 18:26
4

Neste momento está so a fazer para o primeiro link, o [0]. Pode estender a sua logica para aplicar a todos os elementos utilizando um for:

var elementos = document.getElementsByClassName("dia");

for (var i = 0; i < elementos.length ; ++i){
  elementos[i].onclick = function() {teste()};
}

function teste() {
    alert("Deu Certo!");
}
<a class="dia" href="#">1</a>
<a class="dia" href="#">2</a>

Ou utilizando uma das novas sintaxes de javascript o for of:

for (let elemento of document.getElementsByClassName("dia")){
  elemento.onclick = function() {teste()};
}

function teste() {
    alert("Deu Certo!");
}
<a class="dia" href="#">1</a>
<a class="dia" href="#">2</a>

3
  • Não sei porque, mas como nos outros quando testo só o código funciona normal, mas quando coloco no código do calendario, só funciona a 1ª vez 12/07/2017 às 18:16
  • @LeandroTeraoka aconselho então a colocar o calendário que está a ser utilizado, ou partilhar um pouco mais de código para que nós possamos ajudar mais
    – Isac
    12/07/2017 às 18:19
  • O problema é que não me permitem divulgar nada do site :/ testei copiando só o código do calendário em um novo arquivo só com o html do calendario e o script e deu certo. 12/07/2017 às 18:45
4

Podes fazer como o Rafael sugeriu ou adicionar um ausculador global, que funciona como delegador para elementos ainda não criados quando a página carregou. Seria assim:

document.body.addEventListener('click', function(e) {
    if (!e.target.classList.contains('minhaClasse')) return;
    // aqui podes correr o código ou chamar funções pois a classe foi clicada
});

document.body.addEventListener('click', function(e) {
  if (!e.target.classList.contains('minhaClasse')) return;
  // aqui podes correr o código ou chamar funções pois a classe foi clicada
  console.log('clicado!');
});
<button>Normal</button>
<button class="minhaClasse">Com classe</button>

2
  • Não sei porque, mas como nos outros quando testo só o código funciona normal, mas quando coloco no código do calendario, só funciona a 1ª vez 12/07/2017 às 18:16
  • @LeandroTeraoka podes criar um exemplo? assim posso ver e dizer o que não está a funcionar
    – Sergio
    12/07/2017 às 19:50

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 .