In this article, we will learn about Uncaught TypeErrors you can get by working with the setAttribute method in javascript, and how you can handle and avoid these errors.
What is setAttribute() method in javascript: The setAttribute() method in javascript is used to add or update an attribute value on an HTML element.
Example:
HTML
<!DOCTYPE html> <html> <body> <h2>Hello world</h2> <script> let elem = document.querySelector('h2'); elem.setAttribute('style', 'color: red'); </script> </body> </html> |
Output:
In the above example, we select HTML element “h2”, and set its “style” attribute to “color: red”. This makes the color of the “h2” element “red”.
Causes of the error: Now, let’s discuss how you can get Uncaught TypeErrors while working with the setAttribute method:
Cause 1: Setting attributes of an element before it is loaded
In this approach, you may get an Uncaught TypeError saying “Cannot read properties of null (reading ‘setAttribute’)”. This happens because you are trying to set an attribute of an element that hasn’t loaded yet on the webpage.
Example:
HTML
<!DOCTYPE html> <html> <head> <script> let elem = document.querySelector('h2'); elem.setAttribute('style', 'color: red'); </script> </head> <body> <h2>Hello world</h2> </body> </html> |
Output:
Now, to fix this error, you just have to make sure that the element you want to set an attribute to is loaded before it is accessed. One way to do this is to write the script at the end of the body tag, instead of inside the head tag.
Solution:
HTML
<!DOCTYPE html> <html> <body> <h2>Hello world</h2> <script> let elem = document.querySelector('h2'); elem.setAttribute('style', 'color: red'); </script> </body> </html> |
Output:
Cause 2: Calling setAttribute on an array of elements
In this approach, you may get an Uncaught TypeError saying “elem.setAttribute is not a function”. This happens because you are trying to call the setAttribute method on an array of elements, and not on one HTML Element.
Example:
HTML
<!DOCTYPE html> <html> <body> <h2>Hello world</h2> <h2>Geeks for Geeks</h2> <script> let elem = document.querySelectorAll('h2'); elem.setAttribute('style', 'color: red'); </script> </body> </html> |
Output:
Now, to fix this error, just make sure that you are calling the setAttribute method on a single HTML element, and not on arrays of HTML Elements. You can do this by using querySelector or getElementById, instead of querySelectorAll.
Solution:
HTML
<!DOCTYPE html> <html> <body> <h2>Hello world</h2> <h2>Geeks for Geeks</h2> <script> let elem = document.querySelector('h2'); elem.setAttribute('style', 'color: red'); </script> </body> </html> |
Output:
