Javascript function when clicking on any class="foo"

Asked

Viewed 2,171 times

1

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>

3 answers

5

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});
});
  • It worked, but not completely on the calendar I’m using, for some reason on the calendar it only works the first click, then it doesn’t work anymore.

  • I incremented the answer see if it works.

3

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>

  • I don’t know why, but like the others when I test only the code works normal, but when I put it in the calendar code, it only works the first time

  • @Leandroteraoka I advise then to put the calendar that is being used, or share a little more code so that we can help more

  • The problem is that I am not allowed to divulge anything of the site :/ I tested by copying only the calendar code in a new file only with the calendar html and the script and it worked.

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>

  • I don’t know why, but like the others when I test only the code works normal, but when I put it in the calendar code, it only works the first time

  • @Leandroteraoka can create an example? so I can see and tell what is not working

Browser other questions tagged

You are not signed in. Login or sign up in order to post.