Object returning Javascript properties undefined
Here are some relevant HTML elements I'm working 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 am calling "getNextSibling" to get the image that is the input element.
Since the code needs to support the older version of IE, I added this "getNextSibling" function to the fix.js file as recommended for another 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 am running into is when I debug the code, I see that the variable inputSibling contains the requested input sibling element that returns "getNextSibling" (id, checked, class name, etc.), but when I try work with any of the attributes of the returned objects, they are all undefined.
Does anyone have an idea why this might be happening?
source to share
your function returns a jQuery object
function getNextSibling(element) {
var sibling = $('#' + element.id + '').next();
return sibling;
}
so you can access the attributes using attr ()
inputSibling.attr('id')
or if you want to continue using JS access style you need
inputSibling.get(0).id
source to share