Change listStyleImage - Works in IE but not Firefox

A project I'm working on called for certain links in a list to change color/image when the link is clicked (it also hides/unhides a div in each link when clicked).

Here is the JS code that is used:

<script language="JavaScript" type="text/JavaScript">

<!-- Begin

	function showNewColor(div_id) {
		if((document.getElementById)&& (document.getElementById(div_id)!=null)) {
	  		// Get a reference to the element
			var myElement = document.getElementById(div_id);
			if(myElement.style.color == 'black'){
				document.getElementById(div_id).style.color = "red";
				document.getElementById(div_id).style.listStyleImage = "url('/wp-content/themes/HealthyLove/images/bullet1.gif')";		
			} else {
				document.getElementById(div_id).style.color = "black";	
				document.getElementById(div_id).style.listStyleImage = "url('/wp-content/themes/HealthyLove/images/bullet2.gif')";		
			}
		}else {
		  return;
		}
	}

// End --->

</script>

Code (markup):

Here is a snippet of the HTML that calls the JS:

<li><a id="s3" onclick="toggleDisplay('session3');" href="javascript:showNewColor('s3');">Third Session Title</a>
<div id="session3" style="display: none;">
<p>This section would contain information on the session.</p></div>
</li>

Code (markup):

What is supposed to happen is by default the "Third Session Title" link appears in black with a small black triangle beside it instead of a bullet point. That works perfectly.

When somebody clicks on the text link, the toggleDisplay function expans the div that is shown (this works perfectly and doesn't need any help).

However, when the link is clicked it also triggers the showNewColor function shown above, which is supposed to change the text color to red and change the image from a black triangle to a red one (just a way of showing they've selected a specific item in a list of links essentially).

Everything works perfectly in IE 6, 7, and 8.

The problem is Firefox. Everything works as it should in Firefox EXCEPT the listStyleImage part - when somebody clicks the link it stays as the black triangle, however the link text changes to red so I know it partially works.

Any ideas folks?

 

Hi, I would say IE is a magic tool. I cannot really explain why IE does it (it acts like AI), but as you are using reference to id="s3", which is anchor and not list item, Firefox correctly doesn't do anything with property that doesn't exist for certain element. To make it working you may just change your code into (I took your variable myElement instead):

myElement.parentNode.style.listStyleImage = "url('/wp-content/themes/HealthyLove/images/bullet1.gif')";
and
myElement.parentNode.style.listStyleImage = "url('/wp-content/themes/HealthyLove/images/bullet2.gif')";

'parentNode' of element with id="s3" is the actual li element. Really interesting bug, thanks for sharing...