“Cannot read property ‘style’ of Undefined” in JavaScript is a common error related to a property of an element. The below explanations can help you know more about the cause of this error and solutions. Let’s follow it now.
Why does the error “Cannot read property ‘style’ of Undefined” in JavaScript occur?
Property ‘style’ is a property that is of a DOM element. This property can be used to change the CSS appearances of the element. However, there are two main causes of the error “Cannot read property ‘style’ of Undefined” in JavaScript :
Access this property on a variable that is not actually an element
For example, you have an array of HTML Elements. It contains 2 elements, but then you access the property of the third element in the array:
// You have array of two HTML elements
const head = document.head
const body = document.body
const array = [head, body]
// Then you access the third element property ‘style’
console.log(array[2].style)
The error will be raised because, as we have said, you are accessing the property of something which is called undefined, not an HTML Element anymore. If you may probably want to access the second element, you can read the solutions in the next section to see how to solve it.
You are declaring the HTML Element after reading the property
One common cause of this error is that you have been accessing the property ‘style’ before that element is created. This would happen when you put your script in the head tag instead of the last line of the body tag. For example:
<html>
<head>
<script type="text/javascript">
// You have to access the body tag but it has not been created yet
const body = document.body
// Then you access property ‘style’
console.log(body.style)
</script>
</head>
<body>
<h1>LearnShareIT</h1>
</body>
</html>
The example above shows that you need to get the property ‘style’ of the body of the document. But you have to see the location where your script is before the declaration of the body tag. That is the reason why your code cannot find any element and hence return undefined because the JavaScript will run line by line, so the program will execute the code first before creating the body element.
How to fix this error?
Check the type of the element before reading property
As we have explained, maybe you have accessed an out-of-bound array element. You should check the index to see if it is smaller than the array length and is at least 0 or not.
// You have array of two HTML elements
const head = document.head
const body = document.body
const array = [head,body]
// Then you access the second element property ‘style’
console.log(array[1].style)Output:
CSSStyleDeclaration {}Or if it is not an array element that has invalid index, it may be an element returned by the GetElementBy functions, but the name or id you passed into it does not exist. In this case, please check the name in the parameter of that function again and make sure to pay attention to the case-sensitive. Because using a function with a misspelled name may cause this error. Therefore, we also suggest you check the function name again, which is assigned to the object you are reading property.
Declare the element first before reading property
This is the solution to the second cause in this tutorial. All you have to do is putting the script tag at the end of your body tag so it will be executed last.
Example:
<html>
<head> </head>
<body>
<h1>LearnShareIT</h1>
<script type="text/javascript">
// You have to access the body tag so you declare script tag at the end of the body tag
const body = document.body
// Then you access property ‘style’
console.log(body.style)
</script>
</body>
</html>Output:
CSSStyleDeclaration {}The logic behind this solution is understandable, if it does not solve the problem, then it should be in the name or the element you are finding does not exist. Please make sure to check the declaration of the elements before use in JavaScript.
Summary
After reading this article, we believe that you can quickly fix the error “Cannot read property ‘style’ of Undefined” in JavaScript. If you want to get more knowledge, let’s read more about a related tutorial to this error in How To Solve “TypeError: AppendChild Is Not A Function” In JavaScript. It’s helpful for you.
Maybe you are interested:
- Cannot read property ‘includes’ of Undefined in JavaScript
- Cannot find module ‘prettier’ in Javascript
- Cannot read property ‘addeventlistener’ of null in js
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
