1

I'm trying to make a basic JS file for my site and this is what it needs to do. I need it to pick out all of the divs with the classname 'program', and and depending on which 'program' was hovered over, perform an action unique to that element. Is this possible, or would I have to move in a more specific step and go to targeting unique IDs or data attributes?

The only thing I have so far is this:

var programs = document.getElementsByClassName('program');

This is to get an 'array-like' list of all 'programs' appearing in the DOM. Then I want to have a hover function that depending on which 'program' was hovered over, program[0], program[1], program[2], or program[3], perform a specific action.

No jQuery please!

user3412869
  • 1,395
  • 2
  • 10
  • 11
  • How would you discern what action you need to take? If you know that program[0] needed a certain action, you can hardcode program[0].onmouseover to do some intended action, but this is not very extensible. Perhaps if you gave more context, we could help answer the question better. – Patrick Jun 25 '14 at 19:04
  • Maybe this helps: "How to add event listener for html class?" http://stackoverflow.com/questions/6762557/how-to-add-event-listener-for-html-class – bloodyKnuckles Jun 25 '14 at 19:13

4 Answers4

2

There are possibly many ways to do this but you can use EventListener to achieve this.

This is how it could be done:

var x=0;//global variable

    document.addEventListener('DOMContentLoaded',function(){    
    var programs = document.getElementsByClassName('program');

        for(var i=0;i<programs.length;i++){
            programs[i].addEventListener('click',someFtn);
            x=i;
        }

        function someFtn(event){
           console.log(this.id); //it will give you the ID of clicked program
           console.log(x);  // tells which 'i' it was
        }
    });

P.S: Above is the trivial solution for Click event, try it yourself for Hover event. It'd be easy.

Faisal Ashfaq
  • 2,545
  • 4
  • 28
  • 41
  • Excellent this works, thank you. But in the someFtn function, could I somehow log the number i that corresponds with the specific item that I clicked? Like console.log(this./whatever i is here/); – user3412869 Jun 25 '14 at 20:28
  • I am glad it worked out for you please mark it as Accepted so that other could get help from it. I have edited the code accordingly, please check and let me know. – Faisal Ashfaq Jun 25 '14 at 20:41
0

Use .querySelectorAll - https://developer.mozilla.org/en/docs/Web/API/Document.querySelectorAll

Or the old-school method with getElementsByTagName + traversal (recommended only as polyfill)

Misiur
  • 5,019
  • 8
  • 38
  • 54
0

You can use the onmouseoverevent to execute some javascript when the "program" elements are hovered. 

var programs = document.getElementsByClassName('program');
for(var ctr = 0; ctr<programs.length; ctr++)
{
    programs[ctr].onmouseover=function(sender){
        //some action on hover here
        alert("id of element hovered: " + sender.target.id);
    };
}

See fiddle

Edit: added unique requirement for each element, used the ID as an example

koolaide
  • 155
  • 9
0

MouseOver for DOM elements is supported with Javascript using event handlers that can be attached directly to DOM elements.

First use document.getElementsByClassName functionality: http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

Secondly, attach to each item onmouseover functionality: http://www.w3.org/TR/html401/interact/scripts.html#adef-onmouseover

Or as an alternative, if it stylistic in nature CSS handles mouseover as well using :hover reference: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:hover

Good luck!

Lorantz
  • 39
  • 4