CODEWITHSUNDEEP
javascript
Felipe Dourado
Felipe Dourado

Reputation: 441

Event onblur not working in <input> element | JS

I'm pretty new on JS and I need to call an external function when an onblur event happens with the <input type="text" id="username">.

Here is the code:

<input type="text" id="username">
<input type="hidden" id="feedback" value="">

<script>

    var elUsername = document.getElementById("username");

    elUsername.onblur = PagSeguroDirectPayment.onSenderHashReady(function(response){
        if(response.status == 'error') {
            console.log(response.message);
            return false;
        }
        var hash = response.senderHash; //Hash will be available here.

        var elFeedback = document.getElementById("feedback");
        elFeedback.setAttribute("value", hash);
    });

</script>

The code shows no error but as soon as the page loads, the function is being called, sending the hash value immediately to the <input type="text" id="username">. Instead of this, I'd like that this value was only available as the onblur event had been triggered.

Thank you!

Upvotes: 1

Views: 1822

Answers (1)

Nick Parsons
Nick Parsons

Reputation: 50854

The onblur event handler expects a reference to a function which it can execute when the blur occurs. You're instead executing the function and then assigning onblur the return value of your onSenderHasRead() method.

As stated above, onblur expects a reference to a function. In order to do this, you can write your own function which performs the code you want to run when the blur occurs. Then, you can assign onblur a reference to this function:

function handleBlur() {
  PagSeguroDirectPayment.onSenderHashReady(function(response) {
    if (response.status == 'error') {
      console.log(response.message);
      return false;
    }
    var hash = response.senderHash; //Hash will be available here.

    var elFeedback = document.getElementById("feedback");
    elFeedback.setAttribute("value", hash);
  });
}

elUsername.onblur = handleBlur; // a reference to the handleBlur function (note: we are not calling this function, as onblur will call it for us)

Having to create an additional function and then using it later on can disrupt the flow of your code sometimes, so you'll often see people use an anonymous function, which are function expressions that can be assigned in-line, and don't require a name (hence the anonymity):

// onblur will call this --\/ function when a blur occurs
elUsername.onblur = function() {
  PagSeguroDirectPayment.onSenderHashReady(function(response) {
    if (response.status == 'error') {
      console.log(response.message);
      return false;
    }
    var hash = response.senderHash; //Hash will be available here.

    var elFeedback = document.getElementById("feedback");
    elFeedback.setAttribute("value", hash);
  });
}

These days it's often good practice to use .addEventListener() rather than modifying the element's blur event handler. This way if another library or piece of code overwrites the onblur property later on, your blur event will still be registered:

elUsername.addEventListener('blur', function() {
  PagSeguroDirectPayment.onSenderHashReady(function(response) {
    if (response.status == 'error') {
      console.log(response.message);
      return false;
    }
    var hash = response.senderHash; //Hash will be available here.

    var elFeedback = document.getElementById("feedback");
    elFeedback.setAttribute("value", hash);
  });
});

Upvotes: 3

Related Questions