Solve - getAttribute is not a function Error in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Thom Holmes

Solve - getAttribute is not a function Error #

The "getAttribute is not a function" error occurs for multiple reasons:

  • calling the getAttribute method on a jQuery object instead of a DOM element.
  • calling the method on an object that is not a valid DOM element.
  • misspelling getAttribute (it's case sensitive).
  • placing the JS script tag above the code that declares the DOM elements.

getattribute is not a function

If you're using jQuery, use the .attr method instead, because a jQuery object does not expose a getAttribute method.

index.js
// โœ… use `attr` instead of `getAttribute` const result = $('#box').attr('your-attribute'); console.log(result);

Here is an example of how the error occurs.

index.js
const obj = {}; // โ›”๏ธ Uncaught TypeError: obj.getAttribute is not a function obj.getAttribute('data-test');

Calling the getAttribute method on an object that is not a valid DOM element causes the error.

To solve the "getAttribute is not a function" error, make sure to call the getAttribute() method on a valid DOM element and place the JS script tag at the bottom of the body tag, after the DOM elements have been declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" data-test="example">Box</div> <!-- โœ… load jQuery โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

Notice that the JS script tag must be placed at the bottom of the body, after the DOM elements. Otherwise, we end up running the index.js file before the DOM elements are created.

Here is the code for the index.js file.

index.js
const box = document.getElementById('box'); // ๐Ÿ‘‡๏ธ "example" console.log(box.getAttribute('data-test'));

Note that the getAttribute method should only be called on valid DOM elements.

If the error persists, make sure you haven't misspelled getAttribute as it is case sensitive.

You can also console.log the value you're calling the getAttribute method on and check if it's a valid DOM element.

If the element you're calling the method on sometimes does not exist, you can conditionally check if the element is there before calling the getAttribute method on it.

For example, a basic DOM element has a type of object, so we can check if the value is an object and contains the getAttribute property before calling the method.

index.js
const box = null; if (typeof box === 'object' && box !== null && 'getAttribute' in box) { console.log(box.getAttribute('data-test')); }

Our if condition uses the logical AND (&&) operator, so for the if block to run, all of the conditions have to be met.

We first check if the box variable stores a value with a type of object, because DOM elements have a type of object.

Then we check if the variable is not equal to null. Unfortunately, if you check the type of null - console.log(typeof null), you will get an "object" value back, so we have to make sure the value is not null.

The last thing we check for is that the object contains the getAttribute property.

Then we know we can safely call the getAttribute method on the object.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee