web image slider | SoloLearn: Learn to code for FREE!

+1

web image slider

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

2/6/2018 10:09:02 PM

Sebay

11 Answers

New Answer

+2

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

+2

Ok, hello. Is it it?😃 https://code.sololearn.com/WINw01bVDd1h/?ref=app

+1

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

0

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

0

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.

0

yes, thats the purpose

0

but why do you need an event listener?

0

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

-1

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

-1

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

-1

yes just with an eventListener https://code.sololearn.com/WglXy8Z923DV/?ref=app