Error on Class Style Change

Question

I get error of code Unable to get property 'style' of undefined or null reference with this function. I am setting the style of all the elements in the array.

For the record all answers do not address the problem here. If you look at the code it is quite clear the big problem is the curly brackets, one is backwards and there is one extra. The one backwards is the one that is the big problem and why I got errors and why alert worked, as alert is called before the error is read". I think.

I knew I was missing something simple, and is why I posted this. Most programming problems I see here are syntax errors, and are most of my issues when things don't work.

Working on all time low-rep, so please add your vote. THANK YOU.

function marc()
{
    if(navigator.appVersion === "5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR    2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko")
    {
        var x=document.getElementsByClassName('nav_top'), i=x.length;
        if(i===x.length)
        {
            // alert("works now); this works
            x[i].style.margin = "0px -2.2px -1px -2.2px";//this line pulls the error
        }
    }
}

I have tried change the quotes and removing the quotes which changes the error to the function undefined.

How many users do you think will this navigator string match? Do not use user agent detection! — Bergi, May 08 '14 at 02:27

Hank X · Answer 1 · 2014-05-08T02:45:00.840

the array index begins with 0, you set i = x.length, if x.length = 3, i=3. x[3] is out of range. there are only x[0], x[1], x[2].

so if you want to use the last element in the array, set i = x.length - 1. or use x[i-1]. and if(i === x.length) is redundant.

function marc()
{
    if(navigator.appVersion === "5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR    2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko")
    {
        var x=document.getElementsByClassName('nav_top'), i=x.length;
        if(x.length !== 0)
        {
            x[i-1].style.margin = "0px -2.2px -1px -2.2px";
        }
    }
}

score 0 · Answer 2 · answered May 08 '14 at 02:26

0

You are using an index which is equals to the size of the array, so the variable x[i] will always have a null value (as the indexs of an array go from 0 to size-1). If you want to access the last element in the array, you should use x.length - 1 instead of x.length You should also verify that the array contains at least one element. So cleaning up you code will become:

function marc() {
    if (navigator.appVersion === "5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR    2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko") {
        var x = document.getElementsByClassName('nav_top');
        if (x.length > 0) {
            x[x.length - 1].style.margin = "0px -2.2px -1px -2.2px";
        }
    }
}

answered May 08 '14 at 02:26

Stefano Dalpiaz

1,673
10
11

NO,Read the post, the function works and the condition returns true. also reade this http://stackoverflow.com/questions/14142677/how-to-use-getelementsbyclassname-in-javascript-function and there many more backing up my code and I am changing the style of a class not an individual element. I do wonder if I may have to redeclair the i var. – E.R.Rider May 08 '14 at 14:42
If by the condition that returns true you are referring to this line in your code: `if(i===x.length)`, then it will obviously always return `true`. Look at your code: the previous statement is `i=x.length`. You are first assigning a variable with a value, then you are checking if that variable has that value. It's clear that this will always be true. What I am saying is that the value `x.length` is wrong. If you want to only use the last item that has that class, then it should be `x.length - 1`. If you want to use all the element found by 'getElementsByClassName', you should use a `for` loop. – Stefano Dalpiaz May 09 '14 at 00:01

Error on Class Style Change

2 Answers2