TypeError getElementsByTagName is not a function issue

Question

I'm having trouble getting to the source of this problem. Basically the error message I am getting in my console is:

TypeError: $(...).getElementsByTagName is not a function

When I click through to the line it is occuring on it is here:

var inputs = $('directoryresults').getElementsByTagName('input');

I'm not sure why this is happening as I have included jQuery in the header of the page itself:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

Does anyone have any ideas what might be causing this?

Answer 1

Does anyone have any ideas what might be causing this?

The object returned by the jQuery constructor doesn't have the .getElementsByTagName() method.

---

$('selector') returns a jQuery object. .getElementsByTagName() is a native JavaScript method of DOM elements.

To look for elements with a certain tagname using the jQuery object you currently have:

var inputs = $('directoryresults input');
// OR
var inputs = $('directoryresults').find('input');

To get a like-for-like node list that .getElementsByTagName() would return (note this isn't exactly the same, this will return an array where .getElementsByTagName() will return a HTMLCollection):

var inputs = $('directoryresults input').get();

Note: directoryresults, I am assuming, is either a class or id of a DOM element. Either way you'll want to amend the selector above

Answer 2

You are ussing a DOM API mixed with jQuery API sintax:

it's document.getElementsByTagName('input');