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

Question

I would like to run the js function when I press Enter. Everything works fine in IE, Chrome and Opera, but I get an error message (described 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 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 fixed the Mozilla Firefox bug.

Answer 1

If you look at the HTML DOM Level 2 Specification , the click() function is defined only for HTMLInputElement , so although, of course, Safari is not very user-friendly, you do not need to implement this.

The correct way to trigger events for modern browsers is in the 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 a jsfiddle that works in Chrome, Safari, Firefox, and IE9: http://jsfiddle.net/y5yW9/6/

Answer 2

Safari treats .click() as undefined since .click() does not exist for Safari. (I take it back; .click() works for me.: /) I ran into this problem while working on a similar problem . What I came up with, after a bit of research, etc., is the following to trigger click events in safari (like other browsers, of course):

 var t = document.getElementById('someidhere'); if (document.dispatchEvent) { var o = document.createEvent('MouseEvents'); o.initMouseEvent('click', true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, t); t.dispatchEvent(o) } else if (document.fireEvent) { t.fireEvent('onclick'); } else if (t.click()) { t.click() } 

I don't know if this will work for your side of firefox, given that according to @ Dennis your code already works for firefox. Without the environment, to really test this, I shoot in the dark. Hope this works for you.

Answer 3

You fire the click event on a div that will not have any implicit click handler.

Answer 4

A div element does not have a click event handler defined by default. So first you need to apply the click event for the enterSearch div, for example. <div id="enterSearch" onclick="submitSearch()">Search</div> . Otherwise, the button itself will not be available.

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 cannot verify this for IE, but it works with Safari.

Answer 5

getElementById('enterSearch')

should be document.getElementById('enterSearch')