Cannot read property 'style' of undefined -- Uncaught Type Error

Question

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.

This works when I try it here: https://jsfiddle.net/du2ot93e/ - I think your `if` statement is failing. — J. Titus, Feb 21 '17 at 13:37
That code works. Things you should look for: is there the if condition that you want? Are you reading the property 'style' in other place of your code? Is there where the code fails? — Bruno, Feb 21 '17 at 13:41
Hey guys thanks for replying. I have attached the screenshot of the image. When am using a Code snippet in Chrome developers tools and excluding if condition the code works well but when I add with if condition and I insert the code in actually system, then it gives this error its kind of weird for me — sravan kumar, Feb 21 '17 at 13:51
Sidenote: Since you are looking for a single element you could use `var span = document.querySelector(".securitySearchQuery");`, which returns a single element, and then just reference `span.style` without needing to select the `0` index. — Useless Code, Feb 21 '17 at 15:15
Thanks a lot Useless Code (sorry i dont know ur name) .... I will that ... that really helped — sravan kumar, Feb 21 '17 at 17:11

score 17 · Accepted Answer · edited May 23 '17 at 12:16

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.

score 4 · Answer 2 · edited Feb 21 '17 at 14:14

It's currently working, I've just changed the operator > in order to work in the snippet, take a look:

window.onload = function() {

  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";

  }

}

<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>

Cannot read property 'style' of undefined -- Uncaught Type Error

2 Answers2

Related