jquery like class selector and using $(this) in pure js

Question

I want to make a js class selector like in jquery.

$('.someClass').click(function(){
    alert($(this).value());
});

I have tried in javascript .

function myFunction(this){
    alert(this).value;
}
document.getElementsByClassName('someClass').onclick = "myFunction";

this isnt working for me and I have also refered to many other forums in stack overflow.

THIS IS NOT DUPLICATE ... IF YOU FIND IT PLEASE HELP ME WITH THE LINK

`getelementsByClassName` returns a HTMLCollection, which is not a single element, so the attempt to use `.onclick` on it, as if it is a single element, in incorrect. You would have to loop over them and apply the onclick. Also, the assignment of the `onclick` should be just `myFunction`, and not a string. Alternatively you would need to consider using the `addEventListener()` method to set it, rather than the property. And then your method has the issue of the `.value` being on the alert, and not the `this`. — Taplar, Mar 07 '19 at 17:23

DjaouadNM · Accepted Answer · 2019-03-07T16:31:10.257

2

Use a querySelectorAll to get all elements with that class, then use a forEach to loop through them and add an event listener to each:

Coded using jQuery:

$('.someClass').click(function(){
    console.log($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="someClass">Hello, World!</span>
<span class="someClass">1, 2!</span>
<span class="someClass">3, 4!</span>

Coded with pure JS:

var all = document.querySelectorAll('.someClass');

all.forEach((e) => {
  e.addEventListener('click', () => {
    console.log(e.innerText);
  })
});

<span class="someClass">Hello, World!</span>
<span class="someClass">1, 2!</span>
<span class="someClass">3, 4!</span>

edited Mar 07 '19 at 16:31

answered Mar 07 '19 at 16:21

DjaouadNM

22,013
4
33
55

Note that this isn't quite identical. The jQuery sample works on every instance of `.someClass` in the DOM, whereas your plain JS version will only work on the first – Rory McCrossan Mar 07 '19 at 16:22
1

Thats is my whole point.. people are downvoting my question. I just need to know How to make it like jquery. This is not duplicate either. – user9514246 Mar 07 '19 at 16:29
@RoryMcCrossan True, I changed it to `querySelectorAll`. – DjaouadNM Mar 07 '19 at 16:30
@MrGeek Even querySelector isnt working.. its just providing me the first result. – user9514246 Mar 07 '19 at 16:30
@user9514246 I changed it, it's querySelectorAll now, and I'm using a `forEach` loop, check the updated answer. – DjaouadNM Mar 07 '19 at 16:31
Thanks a tonn buddy that worked.. – user9514246 Mar 07 '19 at 16:34
@user9514246 You're welcome. – DjaouadNM Mar 07 '19 at 16:35

jquery like class selector and using $(this) in pure js

1 Answers1