Question

Basically, what I want to know is what can I do that would essentially work like this:

document.getElementsByClassName('particle')[all].addEventListener('mouseover', Jump, false);

I have already tried using a for loop and it froze the browser:

for(var i=0; i <= document.getElementsByClassName('particle').length, i+1){
  document.getElementsByClassName('particle')[i].addEventListener('mouseover', Jump, false);
}

Why didn’t that work?
What can I do to achieve this effect?

Also I tried:

document.getElementsByClassName('particle')[0,1,2,3,4].addEventListener('mouseover', Jump, false);

However, that also didn’t work. . . It only worked on the first and last elements but not on any others.

Answer 1

The for loop is the right approach.

for(var i=0; i <= document.getElementsByClassName('particle').length, i+1){

should be

for (var i=0; i<document.getElementsByClassName('particle').length; i+=1) {

Also, it would be more efficient if you only query the DOM once:

var particles = document.getElementsByClassName('particle');
for (var i=0; i<particles.length; i+=1) {
    particles[i].addEventListener('mouseover', Jump, false);
}