Javascript function when clicking on any class="foo"

Question

I have a calendar where every day is:

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

Then I need that whenever the class "day" is clicked it calls a function, for example the test function().

I did this below, but the problem is that I can only choose 1 class, I want it to work with any one:

<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>

Answer 1

To select all the elementos of a certain class, you can use the function querySelectorAll() who had returned a array with all the elementos <a> who have the informed condition, for example:

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

Now with the captured elements you will need to add the event click in each one, for this you can use the function forEach() to pass through each element within the variable dias and add the eventListener of click:

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

dias.forEach(function(item){
    item.addEventListener('click', handleClick, {once: false});
});

Answer 2

At the moment you are only doing for the first link, the [0]. You can extend your logic to apply to all elements using a 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>

Or using one of the new javascript syntax 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>

Answer 3

You can do as Rafael suggested or add a global headphone, which acts as a delegator for elements not yet created when the page uploaded. It would look like this:

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>