Please Help

Hi,

I have the following:

<ul>
  <li id = "example" style="width: 50%; float: left; padding: 0; clear: none; margin: 0; display: inline;"><span style="padding: 3px; display: block; font-size: 10px; width: 100%; color: #000000; margin: 0;">Example</li>
</ul>

Code (markup):

And the following javascript code that runs on a specific event:

<script type = "text/javascript">
<!-- Hide from older browsers

function changeAdsPerRow(){

  window.document.getElementByID('example').style.width = "25%";

}
// End hide -->
</script>

Code (markup):

When the function is run I get an error message saying "Object does not support this property or method".

What am I doing wrong and how do I fix this?


Thanks,

Hodge

 

Try using
document.getElementByID('example').style.width = "25%";

instead of
window.document.getElementByID('example').style.width = "25%";

PS: use a descriptive title of post.

 

The id of the HTML code is "example1", however in your JS, it's "example". Also, I would just make the HTML look like id="example1" without the spaces, as it's better markup (possibly could be causing the problem also, not sure).

 

Tried that and it didn't do anything...

And sorry about the title!

That was just a typo in pasting it across to here - sorry! That's not the root of the problem though as it's "example" throughout the original code...

 

Yep AndrewR is right, I missed that part, now the JS will be

document.getElementByID('example1').style.width = "25%";

 

Try with this Cross Browser function to get the style of the 'id':

function getStyleObject(objectId) 
{
  if (document.getElementById && document.getElementById(objectId)) 
    { return document.getElementById(objectId).style; } 
  else if (document.all && document.all(objectId)) 
    { return document.all(objectId).style; } 
  else if (document.layers && document.layers[objectId])
    { return document.layers[objectId]; } 
  else { return false; }
}

example_style = getStyleObject("example");
example_style.width = "25%";

Code (markup):