0.style is null or not an aobject

Question

I have the code in java script in following manner.

function changeRoomType()
{

var rtype = document.getElementById('typeofroom').value;
var ps = document.getElementsByName('radios');
if(rtype == 'sb' || rtype == 'db')
{
    ps[0].style.display = 'block';
    ps[1].style.display = 'block';
}
else
{
    ps[0].style.display = 'none';
    ps[1].style.display = 'none';
}
}

my html code is

<p style="position: absolute; float: left; bottom: 138px; width: 50px; left: 359px;display:none;"
   name='radios'>
  <label for="class">Superior</label>
  <input type="radio" name="radio" id="class" value="s" tabindex="1" style="float:left; width:25px;background-color:transparent !important;"/>
</p>
<p style="position: absolute; float: left; bottom: 138px; width: 50px; left: 287px;display:none;"
   name='radios'>
  <label for="class2">Premier</label>
  <input type="radio" name="radio" id="class2" value="p" tabindex="1" style="float:left; width:25px;background-color:transparent !important;"/>
</p>

The above function is called when the value is selected in select box where onchange event is written. By selecting the type of room in select box two radio buttons are shown. This is working fine in google chrome and mozilla. But in Internet explorer8 iam getting an error
0.style is null or not an object. and not displaying the radio buttons.

Thanks in advance!

`document.getElementsByName` should always return a [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506), which, however, can be empty. — Gumbo, Jul 28 '13 at 11:14
Tell us how you show the radio buttons. The problem is clear,the radio buttons are not created! — dsharew, Jul 28 '13 at 11:17
The `name` attribute is really intended for form elements, not for `
` elements, so although `getElementsByName()` should still pick those up perhaps that doesn't work in IE. (And even if it did work I'd still recommend using a more standard approach like giving them a `class`.) — nnnnnn, Jul 28 '13 at 11:35

score 2 · Answer 1 · edited May 23 '17 at 10:31

A related question and solution are posted here. Please refer to the MSDN documentation on getElementsByTagName. This document on MSDN talks about the behavior of getElementsByName is influenced by **expando ** properties.

By controlling the expando property, it is possible to define how IE treats attributes that are not part of the standard attribute sets of an HTML element.Refer to Expando on MSDN

Documentation for the p tag suggests that the name attribute is not part of the standard attributes for this tag; hence it is an expanded attribute. Hence, while Mozilla and Chrome are happy with this expanded attribute and work; IE won't recognize this attribute until you set document.expando=true in your Javascript. Please note that this needs to be done conditionally, by checking the Browser name.

As an afterthought - why don't you use jQuery for performing such DOM manipulations? You will be saved from the migraine of writing cross-browser compatible javascript code and will be to focus on your website functionality.

Yup http://jsfiddle.net/rJ5UB/ works in Chrome but not in IE. Also if possible for this OP the markup needs it's styles moved into a CSS file or style block, should use `
` instead of `
`. The use of ID or Class instead of Name on the wrapping elements and using jQuery would certainly help here too. — Pricey, Jul 28 '13 at 12:11

score 0 · Answer 2 · answered Jul 28 '13 at 11:19

0

Check in your page that you have HTML like,

<input type='radio' name="radios" id='radio1'/>
<input type='radio' name="radios" id='radio2'/>

answered Jul 28 '13 at 11:19

Rohan Kumar

40,431
11
76
106

0.style is null or not an aobject

2 Answers2