Event handler isn't working

Question

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?

How do you know the `onclick` event doesn't work? All it does is prevent event propagation. — Mike Cluck, Dec 13 '16 at 19:53
@VahagChakhoyan [Works fine for me.](https://jsfiddle.net/L446fdLn/) — Mike Cluck, Dec 13 '16 at 19:56
The reason it's not consistent is that some browsers have `event` as a global variable, others do not. — Barmar, Dec 13 '16 at 20:00
@Mike C what browser are you using? In your link it doesn't works as I describe in question. — Vahag Chakhoyan, Dec 13 '16 at 20:07
@VahagChakhoyan It's working fine for me in Chrome. Like Barmar said, `event` is non-standard and is likely the reason behind the problem. — Mike Cluck, Dec 13 '16 at 21:00

score 1 · Answer 1 · edited May 23 '17 at 10:30

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

Event handler isn't working

1 Answers1