Problems with a function

javascript function problem

[catcherman]

I'm trying to switch over a footprint system from text to images. The script below is in an include file, and every page in the checkout process on my site refers to the same code. There's a variable saved that the script references to know what should be "on" for the users to know where they are in the process of checking out.

You can see the old text footprint commented out.

I'm trying to get the function at the top of the script to write in the html for the footprint table, and for it to return the cart content information that is contained in the GetElementById command.

The problem is, if I have both commands in the IF statement, only the footprint will appear on the page. Help...

<script language="javascript">
function disp(a)
{
if (a==1)
{
 document.write('<table background="images/cart_menu_blank.gif" width="100%" height="90" align="left" border="0" cellspacing="0" cellpadding="0"><tr><td align="left"><img src="images/cart_menu_blank.gif" width="20" height="90"></td align="left"><td align="left"><img src="images/checkout-footprint-01.gif" height="90"></td><td align="left" width="100%"></td></tr></table>')
 document.getElementById("cart")
}
if (a==2)
{
<!-- document.write('<table background="images/cart_menu_blank.gif" width="100%" height="90" align="left" border="0" cellspacing="0" cellpadding="0"><tr><td align="left"><img src="images/cart_menu_blank.gif" width="20" height="90"></td align="left"><td align="left"><img src="images/checkout-footprint-01.gif" height="90"></td><td align="left" width="100%"></td></tr></table>')-->
 document.getElementById("address")
}
if (a==3)
{
<!-- document.write('<table background="images/cart_menu_blank.gif" width="100%" height="90" align="left" border="0" cellspacing="0" cellpadding="0"><tr><td align="left"><img src="images/cart_menu_blank.gif" width="20" height="90"></td align="left"><td align="left"><img src="images/checkout-footprint-01.gif" height="90"></td><td align="left" width="100%"></td></tr></table>')-->
 document.getElementById("payment")
}
if (a==4)
{
<!-- document.write('<table background="images/cart_menu_blank.gif" width="100%" height="90" align="left" border="0" cellspacing="0" cellpadding="0"><tr><td align="left"><img src="images/cart_menu_blank.gif" width="20" height="90"></td align="left"><td align="left"><img src="images/checkout-footprint-01.gif" height="90"></td><td align="left" width="100%"></td></tr></table>')-->
 document.getElementById("complete")
}
}
</script>
<form name=f1 >
<!--<table name="t1" id="t1" width="80%" align="center">
<tr>
<td id="cart" name="cart">Cart.......</td>
<td id="address" name="address">Address.......</td>
<td id="payment" name="payment">Payment.......</td>
<td id="complete" name="complete">Complete</td>
</tr>
</table>-->
<%
pg=split(Request.ServerVariables ("Script_Name"),"/")
if instr(1,pg(ubound(pg)),"Show_Big_Cart") <> 0 then
%>
<SCRIPT LANGUAGE=javascript>
<!--
disp(1)
//-->
</SCRIPT>
<% elseif instr(1,pg(ubound(pg)),"check_out") <> 0 then %>
<SCRIPT LANGUAGE=javascript>
<!--
disp(2)
//-->
</SCRIPT>
<% elseif instr(1,pg(ubound(pg)),"Before_Payment") <> 0 then%>
<SCRIPT LANGUAGE=javascript>
<!--
disp(3)
//-->
</SCRIPT>
<%elseif instr(1,pg(ubound(pg)),"payment") <> 0 or instr(1,pg(ubound(pg)),"Payment") <> 0 then%>
<SCRIPT LANGUAGE=javascript>
<!--
disp(4)
//-->
</SCRIPT>
<%end if%>
</form>

[Bernard Marx]

if (a==1) 
{ 
  document.write(
  ....etc....
  ..</tr></table>') 
  document.getElementById("cart") [red]// <-- what happens here?[/red]
} 

[HarleyGuy]

go

[catcherman]

Go?

As far as your commented question, I guess that's where it'd drawing down the cart info.

That's the part that won't appear unless I remove (or comment out) the document.write line.

[Bernard Marx]

What I mean is that it is simply a reference. Nothing is done with it.

Not:
document.getElementById("cart").something = somethingElse;

Or:
something = document.getElementById("cart");

Just:
document.getElementById("cart")

Not a statement, or even a phrase, in any language.
It's just like saying 'The banana', or, as it happens, 'go'.

[catcherman]

Sorry, I should have posted what was there. It went with the commented out section:

document.getElementById("cart").style.backgroundColor="red"

[Bernard Marx]

Sorry, catcherman, I'm a bit lost here.

[catcherman]

Okay, let me ask you this way:

If you had an include that was being used for all four pages of a checkout, and you had a different footprint image you wanted to display on each of the consecutive pages to let the user know where they were in the checkout process, how would you do it?

Assume that there is a variable available from a database letting the ASP page know where the user is in the process.

[Bernard Marx]

- There was a closing </td> with attributes (removed)
- Escaped all instances of </ to <\/

VER 1

function disp(a) 
{
if(a<1¦¦a>5) return; /* <- change these 'bad' pipes to unbroken ¦ characters! */
var stages = ['cart','address','payment','complete'];
    /* doc.write statement is one line */
document.write('<table background="images/cart_menu_blank.gif" width="100%"
 height="90" align="left" border="0" cellspacing="0" cellpadding="0">
<tr><td align="left"><img src="images/cart_menu_blank.gif" width="20"
 height="90"><\/td><td align="left"><img src="images/checkout-footprint-0'+a+'.gif"
height="90"><\/td><td align="left" width="100%"><\/td><\/tr><\/table>'); 
document.getElementById(stages[a]).style.backgroundColor="red"; 
} 

VER 2

If no Javascript, at least they get a default image.
Less messy too.

<table background="images/cart_menu_blank.gif" width="100%" height="90" align="left" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="left"><img src="images/cart_menu_blank.gif" width="20" height="90"></td>
      <td align="left"><img src="images/checkout-footprint-default.gif" id="footImg"height="90"></td>
      <td align="left" width="100%"></td>
    </tr>
</table>
<script type="text/javascript">
function disp(a)
{
  var stages = ['cart','address','payment','complete'];
  document.getElementById("footImg").src = "images/checkout-footprint-"+a+".gif";
  document.getElementById(stages[a]).style.backgroundColor="red";
}
</script>

VER 4

Shouldn't this be done at the server-side?....