Javascript equivalent of jQuery onclick

Question

How should i construct my code to get the effect of this jQuery

var divQuery = $('.html5gallery-thumbs-0').children();
    divQuery.on('click', function () {...}

I thought it is something like this :

 var divQuery = document.getELementsByClassName('html5gallery-thumbs-0');
        divQuery.onclick = function (elem) {
//this.style.display = 'none'
// OR
//elem.style.display = 'none'

}

Element should reference to the clicket object right? Or it should be the key word this. I want to learn javascript because jQuery is only library after all. Thank you in advance!

Jonas Wilms · Accepted Answer · 2017-07-29 12:12:15Z

2

Extending kind users answer with two other approaches:

Using the latest and greatest JS features:

const divQuery = document.querySelector('.a');
divQuery.childNodes.forEach(v => {
  v.addEventListener('click', function() {
    console.log(this.textContent);
   })
 });

And a really old one (which supports IE and other older browsers):

const divQuery = document.getElementsByClassName('a')[0];
  [].forEach.call(divQuery.children, function(v){
     v.addEventListener('click', function() {
     console.log(this.textContent);
  })
})

edited Jul 29, 2017 at 12:12

answered Jul 29, 2017 at 12:04

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kind user · Accepted Answer · 2017-07-29 11:49:02Z

2

Just catch the parent with querySelector and get it's children with children function. Then - iterate over it and bind listener.

const divQuery = document.querySelector('.a');

Array.from(divQuery.children).forEach(v => {
  return v.addEventListener('click', function() {
    console.log(this.textContent);
  })
})

<div class="a">
  <div>child1</div>
  <div>child2</div>
</div>

answered Jul 29, 2017 at 11:49

kind user

42k8 gold badges69 silver badges78 bronze badges

5 Comments

Jonas Wilms Over a year ago

Note that Array.from is quite new. You may also use Array.prototype.forEach.call

kind user Over a year ago

@Jonasw Nope, it's not quite new. ES6 is a standard, actually. I would rather say that using call on Array prototype functions is deprecated.

kind user Over a year ago

@Jonasw Feel free to make your own answer. That's my coding style which I recommend.

RyanZim Over a year ago

@Kinduser Array.from is not supported in IE; many projects still need IE support.

kind user Over a year ago

@RyanZim IE is not a browser, actually. Anyways you can just use old for loop instead of forEach, so Array.from won't be needed.

Mohammed Athar Imran Ahmed · Accepted Answer · 2017-07-29 11:51:37Z

1

what you are doing is almost correct. But when you are finding elements by class it gives you a collection of object. So, first select the index then assign the onclick function. Like below.

var divQuery = document.getELementsByClassName('html5gallery-thumbs-0');
        divQuery[0].onclick = function (elem) {
//this.style.display = 'none'
// OR
//elem.style.display = 'none'

}

answered Jul 29, 2017 at 11:51

Mohammed Athar Imran Ahmed

6853 silver badges11 bronze badges

Collectives™ on Stack Overflow

Javascript equivalent of jQuery onclick

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related