CODEWITHSUNDEEP
javascriptevents
Vahag Chakhoyan
Vahag Chakhoyan

Reputation: 779

Event handler isn't working

I have one input which have event listener onblur and button which have event listener onclick. This is how I organized it

document.addEventListener("DOMContentLoaded", function() { 
    window.searchButton = document.getElementById("searchButton");
    window.searchInput = document.getElementById("searchInput");

    searchInput.onfocus = searchFocus;
    searchInput.onblur = searchBlur;
    searchButton.onclick = search;
});

var resize = function(self, newSize) {
    self.setAttribute("size", newSize);
};

var searchFocus = function() {
    event.stopPropagation();
    resize(searchInput, 30);
};

var searchBlur = function() {
    if (searchInput.value === "") {
        resize(searchInput, 10);
    }
};

var search = function() {
    event.stopPropagation();
};

But when the input is focused and I am clicking on the button, working onblur function, but onclick function isn't working. Why and how can I fix that?

Upvotes: 0

Views: 308

Answers (1)

Chris Perkins
Chris Perkins

Reputation: 819

Your search callback should have event in its param list. Same is true for searchFocus

var search = function(event){
  event.stopPropagation();
};

Also, you might want to check that your DOMContentLoaded handler is firing. Depending upon how your scripts are organized/loaded, it is possible that the DOM has already loaded and that event fired before you register the handler. That's a common oversight. How to detect if DOMContentLoaded was fired

Upvotes: 1

Related Questions