Javascript returned object properties undefined

Question

These are some relevant HTML elements that I work with:

                <TD id=Cell.0.0>
                   <DIV></DIV>
                   <IMG id=_Q0_C0_mrSingleImg src="radio.gif">
                   <INPUT type="checkbox" name=_QGender_C class=mrSingle id=_Q0_C0> 
                   <LABEL for=_Q0_C0>
                      <SPAN class=mrSingleText >
                        some text
                      </SPAN>
                   </LABEL>
                </TD>

In my main JS file, I first assign this onClick method to the img element:

function onImageClickSingle(event) {

    // catch clicked img element
    event = event || window.event;
    var img = event.target || event.srcElement;  // IE fix
    if (img.nodeType == 3) img = img.parentNode; // firefix bug fix

    var inputSibling = getNextSibling(img);

    // some more code that involves working with inputSibling attributes...
}

As you can see, in the above function I call "getNextSibling" to get the image sibling, that is the input element.
Since the code must support older version of IE, I added this "getNextSibling" function to my fix.js file, as was recommended on another stack overflow thread:

// IE 8 and less do not support nextSibling or previousSibling javascript properties 
function getNextSibling(element) {
    var sibling = $('#' + element.id + '').next();
    return sibling;
}

The problem I encounter is that when debugging code, I can see that inputSibling variable does contain the requested input sibling element that "getNextSibling" returns (id, checked, class name etc, are all assigned a value), but when I try to work with either of the returned object's attributs, they are all undefined.

Anyone has an idea of why this might happen?

You'll have to show the part where the values are undefined. There's nothing in the code you've shown that would explain it. — JJJ
– JJJ, Commented Jul 5, 2015 at 12:10
Hi Juhana, thank you for the reply. In the getNextSibling function the attributes are already undefined. — lionHeart
– lionHeart, Commented Jul 5, 2015 at 12:26
Probably something is messed up with the dynamic selector. Since you already have a reference to the element you don't have to search for it again. Just use $(element).next();. — Felix Kling
– Felix Kling, Commented Jul 5, 2015 at 13:12
You use a jQuery function, that will return a jQuery Object. To get a regular DOM Object from a jQuery Object use the [0] operator. Or do the same without jquery. — ikrabbe
– ikrabbe, Commented Jul 5, 2015 at 13:12

volkinc · Accepted Answer · 2015-07-05 13:40:52Z

1

your function returns jQuery object

function getNextSibling(element) {
    var sibling = $('#' + element.id + '').next();
    return sibling;
}

so you will be able to access the attributes using attr()

inputSibling.attr('id')

or if you want to continue with JS access style you need to

inputSibling.get(0).id

answered Jul 5, 2015 at 13:40

volkinc

2,1381 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lionHeart Over a year ago

Thank you very much volkinc, that was exactly the error I wasn't aware of

Collectives™ on Stack Overflow

Javascript returned object properties undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related