web image slider

Question

Hi
I got a few elements

<div class="myClass"> </div>
<div class="myClass"> </div>
<div class="myClass"> </div>
<div class="myClass"> </div>

all of them got an onclick function
I want to know which one i clicked on when all of them got the same function.
So that it alerts: U clicked on the 2 element with the class "myClass" ;)

I hope u know what i mean 🙌
See forward to any responses

Answer 1

Your purpose as well as your context is not clear ^^

Your list of elements with targeted class is already present in Html source, or are you created them dynamically ?
If already present, is the 'onclick' attribute already set with the unique targeted function or not ?

I guess that targeted elements already exists as (without onclick attribute set):

<div class="targetedClass"></div>
<div class="targetedClass"></div>
<!-- ... any number of same wrappers ... -->
<div class="targetedClass"></div>

Then add this JS snippet:
https://code.sololearn.com/WanvGoyBKcxm

document.addEventListener('DOMContentLoaded',initFunc);
function initFunc() {
var targetedElements = document.querySelectorAll('.targetedClass');
var i = targetedElements.length;
while (i--) targetedElements[i].addEventListener('click',clickHandler);
}
function clickHandler(event) {
var target = event.target;
var targetedElements = document.querySelectorAll('.targetedClass');
var count = targetedElements.length;
for (var i = 0; i < count; i++)
if (target === targetedElements[i]) break;
if (i != count) alert('U clicked on the '+(i+1)+' element with the class "targetedClass" ;)');
}

In IE 6-8, you need to use element.attachEvent in place of .addEventListener, and use event.srcElement in place of event.target:
Anyway, .querySelectorAll is only supported since IE 11 (also .getElementsByClassName, and below, it would be more tricky (but not impossible) to get elements by class name...
https://caniuse.com/#search=queryselector
https://caniuse.com/#search=getElementsBy

Also, about @Jonas Schröter code that you've used in your last linked code:
+ don't use setTimeout unsafe way/hack to wait for DOM ready, rather use window.onload=initFunc; or better window.addEventListener('load',initfFunc); or again better document.addEventListener('DOMContentLoaded',initFunc);
+ dont't use element.class attribute, it's not valid, but element.className and/or element.classList

Answer 2

Ok, hello. Is it it?😃

https://code.sololearn.com/WINw01bVDd1h/?ref=app

Answer 3

actually its not necessary
i used one in my first try, so i can use the var of the loop for my index
Then i gave every element the id with the double of the loop
so:

<div id="1" class="class"></div>
<div id="2" class="class"></div>

Then my function just takes the id of the element and sets it as the sliderIndex.

this.id = sliderIndex;

i wanted an other solution, so i made this question

Answer 4

https://code.sololearn.com/WWXMj38EQ88f/?ref=app

Answer 5

So, you can do a loop which iterates 50 times, and create a div every time. Then you access the class name and change it to myClass. Then you access the onclick method and add there your function.

Answer 6

yes, thats the purpose

Answer 7

but why do you need an event listener?

Answer 8

Helped me a lot @visph
thank ya
u r such a great guy, girl or sth else (political correctness on the way)
just jokin'
Thanks

Answer 9

the problem is, that i'll have around 50 elements like that
i wanted that every element has the same function

But i got an idea 💡
Thanks guyz

Answer 10

Like this maybe

https://code.sololearn.com/WCGEHbybu7aQ/?ref=app

Answer 11

yes
just with an eventListener

https://code.sololearn.com/WglXy8Z923DV/?ref=app