Skip to main content

How to Resolve "TypeError: .setAttribute is not a function" Error in JavaScript

The TypeError: x.setAttribute is not a function is a common error in client-side JavaScript. It occurs when you attempt to call the .setAttribute() method on a value that is not a single DOM element. This almost always happens for one of three reasons: the variable holds null, it holds a collection of elements, or it's a jQuery object.

This guide will walk you through the common causes of this error and show you the correct, modern solutions for each scenario.

The Core Problem: .setAttribute() is a DOM Element Method​

The .setAttribute() method is a function that exists exclusively on individual DOM element objects. It is used to set the value of an HTML attribute. It does not exist on plain objects, strings, null, or collections of elements. When you try to call it on any of these non-element types, JavaScript throws a TypeError.

Example of problem:

// Problem: `myValue` is a plain object, not a DOM element.
let myValue = { id: 1 };

// ⛔️ TypeError: myValue.setAttribute is not a function
myValue.setAttribute('id', 'new-id');

Cause 1 (Most Common): The Variable is null (Element Not Found)​

This happens when your JavaScript code runs before the DOM element it's trying to select has been created by the browser, or when there is a typo in your selector. If a selector like getElementById() or querySelector() doesn't find a matching element, it returns null.

Problem: your <script> tag is in the <head> of your HTML, but the element is in the <body>.

<head>
  <script src="index.js"></script> <!-- Runs too early! -->
</head>
<body>
  <div id="my-box">...</div>
</body>
// index.js
// `myBox` will be `null` because the div hasn't been parsed yet.
let myBox = document.getElementById('my-box');

// ⛔️ TypeError: Cannot read properties of null (reading 'setAttribute')
myBox.setAttribute('data-id', '123');

Solution: ensure your script runs only after the DOM is ready. There are two standard ways to do this:

1. Move the <script> Tag (Simple Solution): Move your <script> tag to the very end of the <body>.

<body>
  <div id="my-box">...</div>
  <!-- ✅ Correct: Script runs after the DOM is ready. -->
  <script src="index.js"></script>
</body>

2. Use the DOMContentLoaded Event (Robust Solution): Wrap your code in an event listener that waits for the DOM to be fully loaded.

document.addEventListener('DOMContentLoaded', () => {
  // ✅ Correct: This code is guaranteed to run only after the DOM is ready.
  let myBox = document.getElementById('my-box');
  myBox.setAttribute('data-id', '123');
});

Cause 2: The Variable is a Collection (querySelectorAll)​

Methods like querySelectorAll() or getElementsByClassName() return a collection of elements (a NodeList or HTMLCollection), not a single element. These collection objects do not have a .setAttribute() method.

Example of problem:

// Problem: `boxes` is a NodeList, not a single element.
let boxes = document.querySelectorAll('.box');

// ⛔️ TypeError: boxes.setAttribute is not a function
boxes.setAttribute('title', 'A box');

Solution: you must iterate over the collection and call setAttribute() on each element individually. The forEach() method is perfect for this.

let boxes = document.querySelectorAll('.box');

// ✅ Correct: Loop over the NodeList and set the attribute on each element.
boxes.forEach(box => {
  box.setAttribute('title', 'A box');
});

Cause 3 (for jQuery users): The Variable is a jQuery Object​

If you are using the jQuery library ($), the selector $('#my-id') returns a jQuery object, not a raw DOM element. jQuery objects have their own set of methods, and .setAttribute() is not one of them.

Example of problem:

// Problem: `box` is a jQuery object.
let box = $('#my-box');

// ⛔️ TypeError: box.setAttribute is not a function
box.setAttribute('data-id', '123');

Solution: use jQuery's equivalent method, .attr().

// ✅ Correct: Use the jQuery `.attr()` method.
let box = $('#my-box');
box.attr('data-id', '123');

Alternatively, you can access the raw DOM element from the jQuery object by using index [0] and then call the native method.

// ✅ Correct: Get the raw DOM element from the jQuery object.
let box = $('#my-box');
box[0].setAttribute('data-id', '123');

Conclusion​

The TypeError: .setAttribute is not a function is a clear signal that the variable you are working with is not the individual DOM element you think it is.

To solve it, follow this diagnostic process:

  1. Is your variable a collection? If you used querySelectorAll or getElementsByClassName, you must iterate over the collection and call .setAttribute() on each element inside the loop.
  2. Is your variable null? If so, your script is likely running before the DOM element exists. Move your <script> tag to the end of the <body> or wrap your code in a DOMContentLoaded listener.
  3. Are you using jQuery? If your variable is a jQuery object (created with $()), you must use the jQuery .attr() method instead of .setAttribute().

Table of Contents