Author Topic: Javascript anyone? (event listening)  (Read 178 times)

0 Members and 1 Guest are viewing this topic.

Offline JamminR

  • Ulysses Team Member
  • Hero Member
  • *****
  • Posts: 7759
  • Karma: 353
  • Sertafide Ulysses Jenius
    • View Profile
    • Team Ulysses [ULib/ULX, other fine releases]
Javascript anyone? (event listening)
« on: August 04, 2017, 10:21:16 PM »
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)))
The price one pays for pursuing any profession or calling is an intimate knowledge of its ugly side. - James Baldwin

Offline iViscosity

  • Hero Member
  • *****
  • Posts: 699
  • Karma: 41
    • View Profile
    • iViscosity Gaming
Re: Javascript anyone? (event listening)
« Reply #1 on: August 04, 2017, 10:24:45 PM »
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.  
« Last Edit: August 04, 2017, 10:36:21 PM by iViscosity »
I'm iViscosity. I like gaming and programming. Need some help? Shoot me a PM or Join my Discord!.
--==[ Links ]==--
Steam
YouTube
Steam Group (feel free to join!)
Forums
Public Discord

Quote from: Steve Jobs
Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don't settle.

Offline JamminR

  • Ulysses Team Member
  • Hero Member
  • *****
  • Posts: 7759
  • Karma: 353
  • Sertafide Ulysses Jenius
    • View Profile
    • Team Ulysses [ULib/ULX, other fine releases]
Re: Javascript anyone? (event listening)
« Reply #2 on: August 04, 2017, 10:30:53 PM »
 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')
The price one pays for pursuing any profession or calling is an intimate knowledge of its ugly side. - James Baldwin

Offline iViscosity

  • Hero Member
  • *****
  • Posts: 699
  • Karma: 41
    • View Profile
    • iViscosity Gaming
Re: Javascript anyone? (event listening)
« Reply #3 on: August 04, 2017, 10:46:38 PM »
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.
I'm iViscosity. I like gaming and programming. Need some help? Shoot me a PM or Join my Discord!.
--==[ Links ]==--
Steam
YouTube
Steam Group (feel free to join!)
Forums
Public Discord

Quote from: Steve Jobs
Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don't settle.

Offline JamminR

  • Ulysses Team Member
  • Hero Member
  • *****
  • Posts: 7759
  • Karma: 353
  • Sertafide Ulysses Jenius
    • View Profile
    • Team Ulysses [ULib/ULX, other fine releases]
Re: Javascript anyone? (event listening)
« Reply #4 on: August 04, 2017, 11:28:00 PM »
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.
The price one pays for pursuing any profession or calling is an intimate knowledge of its ugly side. - James Baldwin