Getting id on click from the same class

Question

So, I have 10 balls with the same class and different ids from one to ten.

<section class="stage" >
    <figure class="circle ball" id="1"><span class="shadow"></span></figure>
        </section>
        <section class="stage" >
            <figure class="circle ball" id="2"><span class="shadow"></span> 
    </figure>
        </section>
        <section class="stage" >
    <figure class=" circle ball" id="3"><span class="shadow"></span></figure>
</section>

...

How can I get on click id that is a number and that is stored in variable? I tried querySelector but it only gets me first match, then querySelectorAll but it returns nodelist... I am fairly new to js so if someone have some solution...

Thanks in advance

Possible duplicate of [Getting the ID of the element that fired an event](https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event) — Yassin Yassin, Jun 05 '18 at 09:12
I mean that i want to querySelect class and then addEventListener(click) that will return that element id whenever it is clicked on. — FatBoyGebajzla, Jun 05 '18 at 09:14

score 1 · Answer 1 · answered Jun 05 '18 at 09:12

Use querySelectorAll('.circle.ball') to get all those elements that belong to that class and then use addEventListener() to assign click event. After that you can get the id value by this.id when you click an element.

var elem = document.querySelectorAll('.circle.ball');
for(var i=0; i<elem.length; i++){
  elem[i].addEventListener('click',clickCircle);
}

function clickCircle(){
  console.log(this.id)
}

<section class="stage" >
    <figure class="circle ball" id="1"><span class="shadow">1</span></figure>
        </section>
        <section class="stage" >
            <figure class="circle ball" id="2"><span class="shadow">2</span> 
    </figure>
        </section>
        <section class="stage" >
    <figure class=" circle ball" id="3"><span class="shadow">3</span></figure>
</section>

score 0 · Accepted Answer · answered Jun 05 '18 at 09:13

Run the code snippet and click on the green boxes ...

var balls = document.querySelectorAll('.ball');   // get all balls

balls.forEach(function(ball){  // loop over all balls to use every ball
    ball.addEventListener('click', function(){  // every ball needs to listen on "click" event
        console.log('The ball id is: ' + this.id); // when clicked log the id.
    });
});

.ball {
    background-color:green;
    margin: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

<section class="stage" >
    <figure class="circle ball" id="1"><span class="shadow"></span></figure>
        </section>
        <section class="stage" >
            <figure class="circle ball" id="2"><span class="shadow"></span> 
    </figure>
        </section>
        <section class="stage" >
    <figure class=" circle ball" id="3"><span class="shadow"></span></figure>
</section>

Omar Muscatello · Answer 3 · 2018-06-05T09:21:01.143

document.querySelectorAll('.ball').forEach(link => {
    link.addEventListener('click', function(event) {
         console.log(event.currentTarget.id);
    });
});

<section class="stage" >
    <figure class="circle ball" id="1"><span class="shadow"></span></figure> 
</section>
<section class="stage" >
    <figure class="circle ball" id="2"><span class="shadow"></span></figure>
</section>
<section class="stage" >
    <figure class=" circle ball" id="3"><span class="shadow"></span></figure>
</section>

score 0 · Answer 4 · answered Jun 05 '18 at 09:17

0

Hi you can try this.

var x = document.getElementsByClassName("circle ball");
var i;
var yourId;
for (i = 0; i < x.length; i++) {
    yourId = x[i].id;
}

answered Jun 05 '18 at 09:17

prady

416
2
6
17

You should create a working snippet of that code. Also, it can be slightly enhanced. – Takit Isy Jun 05 '18 at 09:24

score 0 · Answer 5 · answered Jun 05 '18 at 09:17

Your problem is that .querySelector only returns one element.

To target multiple elements, you have to use .querySelectorAll.
Then you can use .forEach to add a listener on all your elements:

document.querySelectorAll('.ball').forEach(function(ball) {
  ball.addEventListener('click', function() {
    console.clear();
    console.log('You clicked id:', this.id);
  });
});

.ball {
  width: 0;
  height: 0;
  border: 20px solid gray;
  border-radius: 50%;
}

<section class="stage">
  <figure class="circle ball" id="1"><span class="shadow"></span></figure>
</section>
<section class="stage">
  <figure class="circle ball" id="2"><span class="shadow"></span>
  </figure>
</section>
<section class="stage">
  <figure class=" circle ball" id="3"><span class="shadow"></span></figure>
</section>

Hope it helps.

score -1 · Answer 6 · answered Jun 05 '18 at 09:14

-1

Try this in your html:

onclick="myFunction(this)"

Then this in your js file:

myFunction(item){
  console.log(item)
}

answered Jun 05 '18 at 09:14

Jerry

1,455
1
18
39

Getting id on click from the same class

6 Answers6