So I have been struggling with a Javascript issues for a couple of days now and can't find an answer anywhere online that has helped.
I have a javascript loop that is looping through all of my <dfn> html tags. These tags are used to not a glossary term on my page. When the user mouses over the term it shows a popup with the term name and the definition. Here is my javascript function:
Actionscript Code:
function definitionRollover(){
var j;
var dfns = document.getElementsByTagName('dfn')
for (j=0; j<dfns.length;j++){
var term = dfns[j].innerHTML.charAt(0).toUpperCase() + dfns[j].innerHTML.slice(1);
var definitionArray = new Array(term, dfns[j].title);
var def = dfns[j].title;
dfns[j].onmouseover = function(){stm(definitionArray,Style[0])}
dfns[j].onmouseout = function(){htm();};
}
}
As you can see I am adding a onmouseover event to these <dfn> tags which calls another function with the definition and term being held in the definitionArray. This works great until I have multiple terms on a page. When I have multiple terms it only shows the last terms definition for all terms. My question is how I can get it to work for all terms. I know that throughout the loop the definitionArray is holding the correct info at the correct time but for some reason it only shows the last one.
I hope that this makes sense and if anyone could give me any tips or leads it would be very much appreciated.
Thanks!