Switch IMG Src using JavaScript

[sunfun]

I am trying to swap the source of the image in the image tag when the onclick event of the A HREF fires off. I know I should have this as a separate function as opposed to trying to do it inline, but that isn't a possibility for what I am doing. If I take out the image swap if, it fires correctly, but with it in, it isn't firing.

Here is the source:

<table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1>
<tr bgcolor="AAAAFF">
<td style="width: 25px"><a href="" 
  onclick="
    if (document.getElementById(\'offerHistory\').style.display == \'none\') 
      {document.getElementById(\'offerHistory\').style.display = \'inline\';} 
    else {document.getElementById(\'offerHistory\').style.display = \'none\';};
    if (document.getElementById(\'offerHistory\').style.display == \'none\') 
      { document.getElementById(\'offerHistImage\').SetAttribute("src", "./images/arrow-right-2.png";}
    else{ document.getElementById(\'offerHistImage\').SetAttribute("src", "./images/arrow-right-2.png";};
    return false;">
    <img id="offerHistImage" src="./images/arrow-down-2.png" />
    </a>
</td>
<td>Offer History</td>
</tr>
<tr><td colspan="2">
<div id="offerHistory" style="display: none;">
<table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1>

Any ideas are greatly appreciated. :)

[Thew]

Why is it all in a Onclick?

try to put it in a function:

<script>
function fire {

 <!-- here your code -->

}
</script>
<button onclick="fire()">

[sunfun]

For the purposes of what I am trying to do it isn't possible to put it in a separate function.

[JKing]

A couple things here.

• Double quotes inside the string aren't escaped
• SetAttribute should be setAttribute
• The brackets for setAttribute were never closed

<table border="1" bordercolor="dddddd" cellspacing="0" cellpadding="1">
<tr bgcolor="AAAAFF">
<td style="width: 25px"><a href="" 
  onclick="
    if (document.getElementById('offerHistory').style.display == 'none') 
{
	document.getElementById('offerHistory').style.display = 'inline';
} 
else 
{
	document.getElementById('offerHistory').style.display = 'none';
}
if (document.getElementById('offerHistory').style.display == 'none') 
{ 
	document.getElementById('offerHistImage').setAttribute('src', './images/arrow-right-2.png');
}
else
{ 
	document.getElementById('offerHistImage').setAttribute('src', './images/arrow-right-2.png');
}
    return false;">
    <img id="offerHistImage" src="./images/arrow-down-2.png" />
    </a>
</td>
<td>Offer History</td>
</tr>
<tr><td colspan="2">
<div id="offerHistory" style="display: none;">
<table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1>

[sunfun]

I took the above suggestions and was able to move it to a function as shown below. I also made a few improvements for reusability sake. I still have 2 problems.

1) the image still doesn't swap.
2) the page refreshes. I was under the impression that if I returned false from the function, that it would not refresh the page. Am I mistaken??

TIA

<SCRIPT LANGUAGE="javascript"> 
<!--
function divHideShow(divName, divImage) {
    if (document.getElementById(divName).style.display == 'none') {
        document.getElementById(divName).style.display = 'inline';
        document.getElementById(divImage).setAttribute('src', 'images/expand.png');
    } else {
        document.getElementById(divName).style.display = 'none';
        document.getElementById(divImage).setAttribute('src', 'images/contract.png');
    }
    return false;
}
//--> 
 
</SCRIPT> 
 
 
<table border="1" bordercolor="dddddd" cellspacing="0" cellpadding="1"> 
<tr bgcolor="AAAAFF"> 
<td style="width: 25px"> 
<a href="" onClick="divHideShow('Report_-_By_Time')"><img id="Report_-_By_Time_Img" src="./images/expand.png" /></a> 
</td> 
<td>Report - By Time</td> 
</tr> 
<tr> 
<td colspan="2"><div id="Report_-_By_Time" style="display: inline;"> 
<table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1><tr><td>something</td></tr>

[JKing]

Your function takes two parameters and you only pass it one.