JS: loop through list of divs to add event by onclick?

Question

 <div>test</div>
 <div>test</div>
 <div>test</div>

If I have a list of divs and want the font size to increase to 20px when clicking each one, I know I can do the following:

let elements = document.querySelectorAll('div');

for (var x = 0; x < elements.length; x++) {
  elements[x].addEventListener('click', () => {event.target.style.fontSize = "20px"}
}

Is there a way to iterate through the listen and add an onclick rather than doing it with the addEventListener way instead? Also, if there is, is one preferred over the other?

Simply assign to the .onclick property instead of calling addEventListener? — CertainPerformance
– CertainPerformance, Commented Jan 16, 2019 at 4:42

Mamun · Accepted Answer · 2019-01-16 04:59:27Z

1

You have to iterate over all the elements. You can use onclick like the following way:

let elements = document.querySelectorAll('div');
for (var x = 0; x < elements.length; x++) {
  elements[x].onclick = function(){
    this.style.fontSize = "20px";
  }
};

<div>test</div>
<div>test</div>
<div>test</div>

Please see addEventListener vs onclick for differences.

edited Jan 16, 2019 at 4:59

answered Jan 16, 2019 at 4:52

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

2 Comments

Raymon Opie Over a year ago

straight forward ...thanks. I'm aware of the benefit addEventListener has to allowing multiple events attached but besides that, is one way preferred over the other?

Mamun Over a year ago

@RaymonOpie, Please visit stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

sr56 · Accepted Answer · 2019-01-16 04:50:02Z

0

You could define font sizes in a CSS Class and add those classes to all the divs. On click, just update the CSS class's font size javascript. This won't need a loop.<< Edit: CSS updation might need a loop ..! >>

You can refer the following tutorial for this

http://www.shawnolson.net/a/503/altering_css_class_attributes_with_javascript.html

Hope that helps..

answered Jan 16, 2019 at 4:50

sr56

9116 silver badges4 bronze badges

Comments

Jack Bashford · Accepted Answer · 2019-01-16 04:53:19Z

0

If you just don't want a loop, check for a click on the page, then look at the event's target (the thing that was clicked):

document.addEventListener("click", function(e) {
  if (e.target.tagName == "DIV") {
    e.target.style.fontSize = "20px";
  }
})

<div>test</div>
<div>test</div>
<div>test</div>

answered Jan 16, 2019 at 4:53

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Collectives™ on Stack Overflow

JS: loop through list of divs to add event by onclick?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related