'undefined' is not a function evaluating el.click() in Safari

Question

I would like to run a js function on pressing Enter button. Everything works great in IE, Chrome and Opera, but I get an error (explained below) in Safari.

I need a pure Javascript solution, not jQuery.

This is the function:

function pressSearch(e) {
    if (typeof e == 'undefined' && window.event) {
        e = window.event;
    }
    var charCode = (e.which) ? e.which : 
                   ((e.charCode) ? e.charCode : 
                   ((e.keyCode) ? e.keyCode : 0));
    if (charCode == 13) {
        document.getElementById('enterSearch').click();
    }
}

This is the HTML:

<input type="text" id="searchKey" onkeypress="pressSearch(event)">
<div id="enterSearch">Search</div> // This is the "button"

I get this error:

// Safari
TypeError: 'undefined' is not a function 
    (evaluating 'getElementById('enterSearch').click()')

What am I doing wrong?

EDIT: I've fixed the Mozilla Firefox error.

I copied and pasted your code into firefox, but got no error... Can you provide a [live demo](http://jsfiddle.net)? — Dennis, Oct 06 '12 at 22:31

score 18 · Accepted Answer · edited Mar 09 '16 at 12:51

18

If you take a look at the HTML DOM Level 2 Specification, the click() function is only defined for HTMLInputElement, so while certainly not very user-friendly Safari doesn't need to implement that.

The correct way to trigger an event for modern browsers is in DOM Level 3 Events:

// First create an event
var click_ev = document.createEvent("MouseEvents");
// initialize the event
click_ev.initEvent("click", true /* bubble */, true /* cancelable */);
// trigger the event
document.getElementById("someElement").dispatchEvent(click_ev);

Here's jsfiddle that works in Chrome, Safari, Firefox and IE9: http://jsfiddle.net/y5yW9/6/

edited Mar 09 '16 at 12:51

Maksym Polshcha

18,030
8
52
77

answered Oct 06 '12 at 23:22

lqc

7,434
1
25
25

I have tried this creatEvent but its not working for IE8 as you mention. But what other option if I have to run this Event for IE8 or anyelse option. Because I am stuck with this situation. Thank you if you will give me answer – Prashant Parekh Dec 06 '13 at 06:46

score 2 · Answer 2 · answered Oct 06 '12 at 22:25

2

You're triggering a click event on a divwhich would have no implicit click handler.

answered Oct 06 '12 at 22:25

Matt Whipple

7,034
1
23
34

Daedalus · Answer 3 · 2020-08-10T01:03:33.690

I came across this same issue while working on a similar problem. What I came up with is the following for triggering click events in safari(as well as other browsers, of course):

var t = document.getElementById('someidhere');
if (document.dispatchEvent) {
    var e = new MouseEvent('click', {
        view: window,    // Window associated with the event
        bubbles: true,
        cancelable: true
    });
    t.dispatchEvent(e);
} else if (document.fireEvent) {
    t.fireEvent('onclick');
} else if (t.click) {
    t.click();
}

According to @Dennis, your code already works for Firefox, however this code should work in Firefox anyway as of version 79.0(the version it was tested in).

Note that initEvent() has been deprecated. The new method of creating the event through the Event constructor doesn't work in Internet Explorer, however.

Did you mean if (t.click()) or if (t.click) ? – Paul Brannan Aug 29 '16 at 19:31 — Paul Brannan, Aug 29 '16 at 19:31
@PaulBrannan Fixed, as well as updated in other regards. – Daedalus Aug 10 '20 at 01:03 — Daedalus, Aug 10 '20 at 01:03

DEAD10CC · Answer 4 · 2012-10-06T22:59:50.733

1

A div element has no click event handler defined per default. So, first you need to apply a click event for the enterSearch div, e.g. <div id="enterSearch" onclick="submitSearch()">Search</div>. Otherwise the button itself won't be clickable.

To execute an event programmatically, use this construct:

function pressSearch(e) {
    if (typeof e == 'undefined' && window.event) {
        e = window.event;
    }

    var charCode = (e.which) ? e.which : ((e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : 0));
    if (charCode == 13) {
        var a = document.getElementById('enterSearch');

        if (typeof a.onclick == "function") {
            a.onclick.apply(a); // binds the scope of onclick to a
        }
    }
}

I could not validate this for IE, but it works with Safari.

edited Oct 06 '12 at 22:59

answered Oct 06 '12 at 22:51

DEAD10CC

910
1
6
20

This won't work with event handlers added via 'addEventListener'. – lqc Oct 06 '12 at 23:26
But addEventListener won't even work for IE. Thus, I recommended the "old" fashioned way if possible. Or alternatively an IE-Others switch has to be inserted for programmatically binding of events. – DEAD10CC Oct 08 '12 at 12:21
Ok, when using programmatically event binding it seems that the solution from Daedalus is the most generic. Use it. – DEAD10CC Oct 08 '12 at 12:28

score 0 · Answer 5 · answered Oct 05 '12 at 10:28

0

getElementById('enterSearch')

should be document.getElementById('enterSearch')

answered Oct 05 '12 at 10:28

xdazz

158,678
38
247
274

my real code has `document.blabla` in it and it does not work – Hypn0tizeR Oct 06 '12 at 22:14

'undefined' is not a function evaluating el.click() in Safari

5 Answers5

Linked