Cannot read property 'style' of undefined -- Uncaught Type Error
I would like to change the color, fontsize and font weight of the text in a span element of the html page.
I am using the following code:
if(window.location.href.indexOf("test") > -1){
var search_span = document.getElementsByClassName("securitySearchQuery");
search_span[0].style.color = "blue";
search_span[0].style.fontWeight = "bold";
search_span[0].style.fontSize = "40px";
}
Following is the code for my html page
<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>
I thought of getting elements by id but unfortunately they only classes and no ids. I do not have access to change the html code but just to add js code to website externally.
I have tried to look into other stackoverflow posts but could find the solution. Am new to js and css,Please let me know where am going wrong.
Answer
Add your <script> to the bottom of your <body>, or add an event listener for DOMContentLoaded following this StackOverflow question.
If that script executes in the <head> section of the code, document.getElementsByClassName(...) will return an empty array because the DOM is not loaded yet.
You're getting the Type Error because you're referencing search_span[0], but search_span[0] is undefined.
This works when you execute it in Dev Tools because the DOM is already loaded.