Stupidest ? Ever: IE anomaly on document.write? [Archive]

View Full Version : Stupidest ? Ever: IE anomaly on document.write?

Skreeman

12-12-2005, 10:29 AM

Hi guys... awesome forum! I can't wait to dig deep as I start to lock into JS a bit more. Old HTML-hand-coder, self-taught and missing chunks of foundational info... but I keep on learning.

I've put in many hours of due-diligence on this stupidly simple problem, and am finally ready to ask for help. I have run into a document.write problem that defies my logic after dozens of tests. Essentially, my functional but not elegant script works admirably in FF, and hangs in IE. It appears to be from adding document.write statements improperly, but I sure can't figure it out.

I've stripped it to the bare bones so that you can isolate it easily:
http://www.putters-edge.com/easy/test/problem.html

In IE6 it will only say "Hi there." after you press the NEXT button, but in FF it gives the desired output. Yet if I remove the document.write("Hi there."); line, IE displays the proper output. VERY strange to my mind, but certainly obvious to everyone else here.

Try not to laugh - I have only been a JS coder for about 36 hours now, but I'll get the hang of it!

Thanks so much for your time and effort!

CAUTION: Avoid rolling eyes too far into back of head when viewing this code!!! Retinal disfigurement and baldness may result.

edited to add: I also noticed that FF seems to be in a death loop which never finishes loading... hmmmm?

_Aerospace_Eng_

12-12-2005, 10:51 AM

Try putting your parameters in quotes.
<input type="button" onClick="payButton('pnum', 'proddesc')" value="Next">
As for the 'loop' in FF, add document.close(); after your document.writes in your function.
IE may be freaking out not knowing where to get those values, try using the square bracket notation, where the 0 in forms[0] is the location of the form on the page, you could even use this.form
<HTML>
<HEAD>
<TITLE>Putter's Edge - Special Order Page</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="http://www.putters-edge.com/2003/style1.css">
<link rel="stylesheet" type="text/css" href="http://www.putters-edge.com/2003/pe05style.css">

<style type="text/css">
.buynow
{font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align:left; vertical-align:top; display:inline;
}
.mishmosh
{color: #000000; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-variant: normal; font-weight: normal; text-align: left; margin: 0 5px; padding: 5px 5px 0; overflow: hidden;
}
</style>

<script type="text/javascript" language="javascript">
pnum = new Object()
proddesc = new Object()
price = new Object()
description = new Object()
</script>

</HEAD>
<BODY bgcolor="ffffff">

<p align="center"> 
<p align="center"> 
<p align="center"> 
<p align="center"> 

<div class="dealers" style="text-align:center; line-height:40px; vertical-align:top; font-size:14px;">Custom Order Payments</div>
<div class="mishmosh" style="text-align:center;">This section is for shoppers<br>who have requested a quote<br>for a <b>custom order</b>, and are<br><b>ready to purchase</b>.</div><br><br>

<div align="center"><span class="mishmosh">Please enter the quoted price <b>in dollars only</b>:<br>(<i><b>Example</b>: For</i> <b>$325.00</b>, <i>just enter</i> <span style="font-family: monospace; background-color:#ffff00; font-size: 15px;"> 325 </span>)<br>Do not include any shipping cost!</span>

<form name="checknum">
<div style="display: inline; vertical-align: 3px; font-size: 12px;">My <b>Quoted Cost</b> was <span style="font-size: 15px; vertical-align: 3px;">$</span></div>
<input name="pnum" size="5" value="123" style="background-color:#ffff00"><br><br>
<div style="display: inline; vertical-align: 3px; font-size: 12px;">for a </div>
<input name="proddesc" size="25" value="Custom Portable Green"><br>
<div style="vertical-align: 3px; font-size: 9px;">(You may change the above description if you like!)</div><br>
<input type="button" onClick="payButton(this.form.pnum.value, this.form.proddesc.value)" value="Next">
</form>

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

function payButton(price, description)
{
document.write("Hi there.");
document.write("Your quoted price was $<b>" + price + ".00</b><br>for a <b>" + description + "</b><br>");
document.close();
}
</script>

</BODY>
</HTML>

Skreeman

12-13-2005, 05:28 AM

Awesome! Wonderful! Marvellous!

Thank you, Aerospace... It had to come down to syntax, as it's always been my Achilles Heel. I coded back-in-the-day with COBOL, FORTRAN, BASIC, et al... and am having a tough time grasping the "new" object concept, let alone the new syntax.

However, your proposed change (I used the this.form.pnum.value approach) forced me to remove the .value from my "written" variables in my document.write statements in order to make them work again. Whereas, prior to the change they contained the right values using .value at the end, they became undefined when I went with the this.form approach. Can you explain that concept simply to an old guy?

I thought you might be interested in seeing the now-working code in context:
http://www.putters-edge.com slash easy. (I don't want it robot-indexed!)

It's fine "as is" for our current needs, but in a perfect world I will eventually want to try to make the generated page replace the paragraph and form that triggered it - know what I mean? Could you please point me to the basic concept/path I'll need to take, and then I'll fuss with writing the code until I finally understand... because I think this will really help me over the "object" hurdle once I get it. It's simply a matter of knowing what "it" is, and how JS prefers it to be accomplished!

Again, thank you so much, and PLEASE don't spend more than a moment on this one...