TypeError: Cannot read property ‘getAttribute’ of Null in JavaScript is an error you will often encounter in the process of programming in the JavaScript language. This article will discuss the causes and how to fix them. Let’s read it now.
The TypeError: Cannot read property ‘getAttribute’ of Null in JavaScript
getAttribute is a method in JavaScript which allows programmers to get a specific attribute of an element that calls the method. However, sometimes the error will occur because of two reasons:
- Using the method on a null but not a DOM element, which may be because of incorrect return fromfunction.
- Insert the <script> tag before the DOM elements.
According to the above explanation, we have two causes of the error. Next, we will show you how to solve the error with two solutions, each corresponding to a cause.
Reasons 1: Using method getAttribute() on a DOM element which doesn’t exist
This is the most significant cause of the “TypeError: Cannot read property ‘getAttribute’ error of Null”. The following example describes this cause in detail.
Example:
<html>
<body>
<div id="res">LearnShareIT </div>
<script type="text/javascript">
let res = document.querySelector("learnshareit")
console.log(res.getAttribute("id"))
</script>
</body>
</html>
In the above code, we used the document.getElementById() method to get the element whose id is “learnshareit”. But this element does not exist. Furthermore, the way we get the element by id using the querySelector() method has been wrong, as it requires a css selector such as #learnshareit or #res to find the id. In this case, you will encounter “TypeError: Cannot read property ‘getAttribute’ of Null”.
It would help if you made sure that the Dom element that you call to use the method getAttribute() exists and can call the method.
In the following example, we will get the element with id “res” instead of “learnshareit”:
<html>
<body>
<div id="res">LearnShareIT </div>
<script type="text/javascript">
let res = document.querySelector("res")
console.log(res.getAttribute("id"))
</script>
</body>
</html>Output:
Uncaught TypeError: Cannot read properties of null
As you can see, the error still happens, do you know why? Because you are using querySelector() to get the element according to its id, not the method getElementById(). You cannot pass the id of the element into it because it requires a css selector. Therefore, you should pass #res if you use this method:
<html>
<body>
<div id="res">LearnShareIT </div>
<script type="text/javascript">
let res = document.querySelector("#res")
console.log(res.getAttribute("id"))
</script>
</body>
</html>Output:
resOr you can use getElementById() also:
<html>
<body>
<div id="res">LearnShareIT </div>
<script type="text/javascript">
let res = document.getElementById("res")
console.log(res.getAttribute("id"))
</script>
</body>
</html>Output:
resHave you found the differences between these two methods? In the latter one, we neglect the hash character and only pass the id we want. So we suggest you should check if the element returned by these methods getElementsByClassName, getElementById, getElementsByTagName, and query selectors is not null (you can print out it to check null). Also, check the syntax and how to use them.
Reasons 2: Insert script tag before declaring DOM elements
“TypeError: Cannot read property ‘getAttribute’ of Null” occurs when you insert script tags before declaring DOM elements.
For instance:
<html>
<body>
<script type="text/javascript">
let res = document.getElementById("res")
console.log(res.getAttribute("id"))
</script>
<div id="res">LearnShareIT </div>
</body>
</html>Because we have inserted the script tag before declaring the div element with the id “res”, the JavaScript will run the script before creating the element div and the error will appear. To avoid the “TypeError: Cannot read property ‘getAttribute’ of Null” error, always insert the script tag after declaring DOM elements. You can look for examples in the previous section.
Summary
This article has explained what causes the TypeError: Cannot read property ‘getAttribute’ of Null in JavaScript and how to solve it. We hope our article will be helpful to you. Have a good day!
Maybe you are interested:
- TypeError: Assignment to Constant Variable in JavaScript
- TypeError: contains is not a function in JavaScript
- TypeError: getMonth() is not a function in JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R