Javascript function when clicking on any class="xpto"

Question

Javascript function when clicking on any class="xpto"

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

0

I have a calendar where every day is:

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

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

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

javascript classes click

asked by anonymous 12.07.2017 / 19:49

3 answers

How to use if else in the code below javascript / html counter

score 3 · Answer 1

To select all elementos of a given class, you can use the querySelectorAll() function that returns a array with all elementos <a> that has the given condition, for example:

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

Now with the captured elements you need to add the click event to each, so you can use the forEach() function to go through each element within the dias variable and add eventListener click %:

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

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

score 2 · Answer 2

You can as Rafael suggested or add a global hearer, which serves as a delegate for elements not yet created when the page loaded. 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>

score 1 · Answer 3

At this point, only the first link, [0] , is to be done. You can extend your logic to apply to all elements by using 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 syntaxes 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>