Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

My script is too long - how can I reduce with Arrays + Document.Write? 1

Status
Not open for further replies.
sonicsnail

sonicsnail

Technical User
Nov 10, 2001
48
IN
I am creating a page which is a Problem Solving Guide.


but my code is HUGE due to the hidden div's.

Can I reduce this by putting all the data into an array and document.write in a loop? (I think I can, but I don't know how!)

many thanks,

Pete
 
Sort by date Sort by votes
Ok, but I was really hoping that I could declare all of the sections with some kind of function/array that held and wrote everything:

(title,option1,option2,content)

so JS would build the page on the fly.. nice'n'clean, with potential to fill the array with serverside variables..??
 
Upvote 0 Downvote
xutopia - I've just read one of the FAQs you wrote - faq216-1753.

This seems like EXACTLY what I'm looking for - but using alert rather than document.write...

however I'm trying to use your code, but finding that it doesn't work - I'm guessing due to the fact that your code has been messed up by the forum - a lot of it is in italics - maybe there's a [ i ] missing?

Pete
 
Upvote 0 Downvote
I fixed the errors in my faq. You were right the italic was a problem so I give you a star for telling me something was wrong with my stuff (people that critisize me often do if it is done diplomatically and for the purpose of learning or becomming better people).

Glad my FAQ is of interest to you. I believe if you implement such things as objects you might hit some more complicated problems but you'll become a great programmer! :) Object Oriented Programming (OOP) is almost the only way I program now.

If you plan to use document.write a lot do read my FAQ on speeding up strings. Gary Haran
 
Upvote 0 Downvote
I'm struggling away with this..

This page clearly doesn't work however - when I _do_ get it to render the layers, the document.write clears the page before working.


*pulls hair out*

Advice/suggestions?

many thanks,

Pete

(here's the code)

Code: 
<html>
<head>
<title>STEPbySTEP II</title>

<script>

function STEPbySTEPfix(name, option1, option2, option3, description)
{
  this.name        = name
  this.option1     = option1
  this.option2     = option2
  this.option3     = option3
  this.description = description
}

var STEPbySTEPfixes = new Array();
STEPbySTEPfixes[STEPbySTEPfixes.length] = new STEPbySTEPfix(&quot;cookingmethod&quot;, &quot;fry&quot;, &quot;boil&quot;, &quot;poach&quot;, &quot;Choose your cooking method&quot;)
STEPbySTEPfixes[STEPbySTEPfixes.length] = new STEPbySTEPfix(&quot;fry&quot;, &quot;veg oil&quot;, &quot;olive oil&quot;, &quot;&quot;, &quot;which oil are you using?&quot;)
STEPbySTEPfixes[STEPbySTEPfixes.length] = new STEPbySTEPfix(&quot;boil&quot;, &quot;hotwater&quot;, &quot;coldwater&quot;, &quot;&quot;, &quot;are you using hot or cold water&quot;)
STEPbySTEPfixes[STEPbySTEPfixes.length] = new STEPbySTEPfix(&quot;veg oil&quot;, &quot;ok&quot;, &quot;&quot;, &quot;&quot;, &quot;heat the oil very hot&quot;)


{
for (var index = 0; index < STEPbySTEPfixes.length; index++)
{
  var item = STEPbySTEPfixes[index];
  document.write(&quot;<div id=&quot; + item.name + &quot; style=\&quot;display:none\&quot;><table border=1 width=300><tr><td width=200>&quot; + item.description + &quot;</td>&quot;)
  document.write(&quot;<td><input type=checkbox onclick=&quot; + item.option1 + &quot;></td><td><input type=checkbox onclick=&quot; + item.option2 + &quot;></td></tr></table>&quot;)

}
}

function showORhide(whichone)
{
if (whichone.style.display == &quot;none&quot;) {
whichone.style.display = &quot;block&quot;;
} else {
whichone.style.display = &quot;none&quot;;
}
}


</script>
</head>

<body>

<table width=&quot;500&quot; border=&quot;1&quot;><tr>
<td width=&quot;300&quot;>Prepare a cooking pan</td>
<td width=&quot;100&quot; align=&quot;center&quot;>Boiling<br><input type=&quot;checkbox&quot; onclick=&quot;showORhide(fry)&quot;></td>
<td width=&quot;100&quot; align=&quot;center&quot;>Frying<Br><input type=&quot;checkbox&quot; onclick=&quot;showORhide(boil)&quot;></td>
</tr></table>

<a href=&quot;#&quot; onclick=&quot;showORhide(fry)&quot;>START</a>


</body>
</html>
 
Upvote 0 Downvote
If you want to (optimize your code) and (keep your sanity), go slow and be very clear about your goals. Change one thing at a time, always have previous versions available for error recovery.

It looks like you want to use arrays to manage parameter information, document.write() to reduce html, and create displays on-the-fly in response to user clicks. All do-able, but save yourself some hair and implement in small steps.

I'd have a go at document.write() first. Version One contains a bunch of divs that reduce nicely to template information and parameters. A build function, perhaps --
Code: 
bldStepDiv(id,desc,opt1Desc,opt1,opt2Desc,opt2)
{
// create and document.write() Step <div>
}
in the <head> and something like --
Code: 
bldStepDiv(&quot;first&quot;,&quot;Prepare a cooking pan&quot;, ...)
bldStepDiv(&quot;frying&quot;,&quot;Add oil to frying pan&quot;, ...)
...
in the <body>.

When this pass is working you'll have the functional equivalent of Version One, drastically reduced html file size. You might then use arrays to store parameters, change the <body> inline code to an indexed loop. Or you might decide to leave things alone.

The less complexity you try to implement the quicker you get the job done correctly. It sounds strange but you get there faster by going slower.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
409
gmmastros
gmmastros
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
672
JScannell
JScannell
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
683
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke

Part and Inventory Search

Sponsor

Back
Top