Javascript anyone? (event listening)

[JamminR]

As some of you know, my wife's been in grad school online at Harvard Extension for some months now.
(She's going for a Masters in Digital Media Design - and she's doing great!)
She just finished a javascript course.
As I've never taken javascript formally, but am decent at figuring out just about any scripting language, I decided to review her various assignments and see if I could teach myself some javascript.

Within one of the projects, it's required to turn a 'box' of text within a div into spanned words individually. Each word would then have a class ("word") added an individual ID ("word##"), and change style when hovered over, removing the style after hover ends.

The below, in combination with code not shown, works 100%
It's based inside a loop (which increases i, and 'word_count')
'my_div_element' is the div box with the words in it to work with, and is defined earlier than shown.

Code: Javascript

1. // Thanks to W3Schools
2. // https://www.w3schools.com/js/js_htmldom_nodes.asp                    
3.  
4. // create span element
5. var to_span = document.createElement("span");
6.  
7. // set span class to word
8. to_span.setAttribute("class", "word");
9.  
10. // set span id to word + ##
11. var IdNum = "word" + word_count
12. to_span.setAttribute("id", IdNum);
13.  
14. // create text node with current word, trimming extra space and \n, from my array plus a space
15. var my_word = document.createTextNode(array_transcript[i].trim() + " ");
16.  
17. // append current text to my current span
18. to_span.appendChild(my_word);
19.  
20. // append my new span to my trascriptText div element
21. my_div_elem.appendChild(to_span);
22.  
23. document.getElementById(IdNum).addEventListener("mouseover", MouseHover);                    
24. document.getElementById(IdNum).addEventListener("mouseout", MouseExit);
25.  

My question is regarding the last two lines, the event listeners: According to w3schools and a few other sites that describe 'addEventListener', I should be able to attach the event listener to an 'element'.
Though 'document' works in my code, it's the only working solution I can find.
Is there not a more efficient means? Must I really attach it to the whole document+getelementid(name)?
How, if I can, would I go about attaching it to my specific span element without using the 'document' element first?
I've tried;
to_span.id.addEvent....
my_div_elem.to_span.id.addEvent...
getElementById(IdNum).addEvent...
A few others I can't remember now.
Most return 'blah' is not a function.

Any more experienced javascripters out here give me a more efficient working example of how to get the 'element' using the variables I already have in the loop? (I've not tried 'this', but am somewhat familiar with it (somewhat, 'this' still remains confusing to me at times)))

[iViscosity]

There's no real simple way of doing this, you could just write a new function and have it return the element ID:

Code: Javascript

1. var $ = function( id ) {
2.     return document.getElementById( id );
3. };
4.  
5. $( IdNum ).addEventListener( "mouseover", MouseHover );
6.  

of course, the var you use could be anything:

Code: Javascript

1. var getId = function( id ) {
2.     return document.getElementById( id );
3. };
4.  
5. getId( IdNum ).addEventListener( "mouseover", MouseHover );
6.  

Keep in mind that creating a variable will depend on scope, so if you make it it's own global function, or define a global variable, you should be good. On JS scope: https://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip

This is simply a limitation on JavaScript, no easy way around it.

EDIT: To what you said at the end (didn't see it first) "this" is pretty similar to "self" in Lua. It basically can be changed on a global or local scope. For example:

Code: Javascript

1. // An object can be passed as the first argument to call or apply and this will be bound to it.
2. var obj = {a: 'Custom'};
3.  
4. // This property is set on the global object
5. var a = 'Global';
6.  
7. function whatsThis(arg) {
8.   return this.a;  // The value of this is dependent on how the function is called
9. }
10.  
11. whatsThis();          // Returns 'Global'
12. whatsThis.call(obj);  // Returns 'Custom'
13. whatsThis.apply(obj); // Returns 'Custom'
14.  

[JamminR]

 iViscosity - though I could see that being useful if I wasn't going to know the id I'm passing, it only complicates the code when in a loop and all the info is known.
I'm looking to learn if there's a way other than document.getelementid, considering I already have the information inside that loop that contains the master div I'm working with, the span, it's class, and even it's dynamic ID name.
I'm willing to accept that there isn't, but, it just doesn't make sense to me that I'd have to use DOM 'document', when all examples state 'element', (but yes, always seem to go on to show demo/example of 'document')

[iViscosity]

Oh, I misread what exactly you werer trying to do. I think I may know how to do this. EventTarget.addEventListener() uses an EventTarget which, according to the documentation, "may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest)". So, instead of using "to_span.id.addEvent..." try "to_span.addEvent..."

Code: Javascript

1. // Thanks to W3Schools
2. // https://www.w3schools.com/js/js_htmldom_nodes.asp                    
3.  
4. // create span element
5. var to_span = document.createElement("span");
6.  
7. // set span class to word
8. to_span.setAttribute("class", "word");
9.  
10. // set span id to word + ##
11. var IdNum = "word" + word_count
12. to_span.setAttribute("id", IdNum);
13.  
14. // create text node with current word, trimming extra space and \n, from my array plus a space
15. var my_word = document.createTextNode(array_transcript[i].trim() + " ");
16.  
17. // append current text to my current span
18. to_span.appendChild(my_word);
19.  
20. // append my new span to my trascriptText div element
21. my_div_elem.appendChild(to_span);
22.  
23. to_span.addEventListener("mouseover", MouseHover);                    
24. to_span.addEventListener("mouseout", MouseExit);
25.  

I misunderstood what you meant by the question, so I think this may work, but I'm not sure as I'm not too familiar when it comes to this.

[JamminR]

UGH!
I could have sworn I tried that example before. (as part of the examples I forgot and didn't list in OP)
It works.

I guess it works now because it's later in the code?
I think I'd tried it previously immediately after the setAttr(id) command.
Guess until it was added to the div as a child it wasn't fully baked yet.

Thanks iViscosity.