NodeJS [SOLVED]: Why does this setup of event handler not work?

NodeJS [SOLVED]: Why does this setup of event handler not work?

Home Forums Scripting NodeJS Tutorials NodeJS [SOLVED]: Why does this setup of event handler not work?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245847

    Cloudy Point
    Keymaster

    QuestionQuestion

    Here is my html file /tmp/test/test.html

    <!DOCTYPE html>
    <html>
    
      <head>
        <script src="../js/my.js" defer>
        </script>
      </head>
    
      <body>
    
        <p>This example uses the HTML DOM to assign an "onchange" event to an input element.</p>   
    
        Enter your name: <input type="text" id="fname">
        <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
    
    
      </body>
      </html>
    

    Here is my javascript file /tmp/js/my.js, but the setup of event handler doesn’t work. why does it not work, and what shall I do to make it work?

    function myFunction1(input) {
        input.value = input.value.toUpperCase();
    }
    
    document.getElementById("fname").onchange =  myFunction1;
    

    If I replace the content of my javascript file with

    function myFunction2() {
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
    }
    
    document.getElementById("fname").onchange =  myFunction2;
    

    the event handler works. I wonder why there is such a difference between the two methods?

    Which way is preferred to specify the setup of event handler, in an external javascript file or in html file?

    Thanks.

    #245848

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    The reason it doesn’t work has nothing to do with the script being in an external file. It is because you are assuming that a reference to the DOM object is being passed to the function as an argument (input), which it is not. input is actually a reference to the event. Event handlers that are set up using object properties (onchange, etc.) or via the more modern and standards-based .addEventListener() are automatically passed a reference to the event that was invoked as the callback function’s first argument.

    Your second version works because you are not relying on the argument for your reference to the DOM object and are correctly getting a reference to the DOM object with document.getElementById("fname"). But, in reality, you don’t need to do anything special to get a reference to the DOM object that triggered the event, as that object will be bound to the this keyword within the callback function.

    Beyond that, you should really move away from setting up events via event properties like onchange, etc. because that approach limits you to setting up only one event handling function per event. Instead use modern standards using element.addEventListener()

    Lastly, to change text content to all upper case, you don’t even need JavaScript as that can be done solely with CSS.

    See the example below that shows all of this:

    // Get your reference to DOM objects that you'll need just once, when the DOM is available
    // And, set up events following modern standards:
    document.getElementById("fname").addEventListener("change", myFunction);
    
    // Event handlers are automatically passed a reference 
    // to the event as the handler's first argument.
    function myFunction(evt) {
      // Inside of an event handler for a DOM object, you can always
      // reference the DOM object that triggered the event via the target property
      // of the event (evt.target in this case) or, even simpler via the "this" keyword.
      console.log("Event: " + evt.type.toUpperCase()  + " was triggered by: " + this.nodeName + " " + this.id + " " + evt.target);
      this.value = evt.type;
    }
    /* You don't need JavaScript to convert content to upper case */
    #fname { text-transform:uppercase; }
    <p>This example uses the HTML DOM to assign an "onchange" event to an input element.</p>   
    
    Enter your name: <input type="text" id="fname">
    <p>When you leave the input field (just hit TAB after inputting some data), the CHANGE event callback function is triggered.</p>

    Source: https://stackoverflow.com/questions/48017241/why-does-this-setup-of-event-handler-not-work
    Author: Scott Marcus
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.