www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Creating Line Breaks in Array String

  1. #1
    Join Date
    Dec 2009
    Posts
    16

    Creating Line Breaks in Array String

    I'm making a recipe program and have created the following array (this is only the important part):

    var r = new Array();

    r[0]=new Array("Apple Pie","Dessert","5-6 Cooking Apples 1 1/4 Cups Granulated Sugar.");

    I need a line break between the two ingredients and nothing is working for me - I tried \n and other stuff;<br> is interpreted as part of the string and <pre> didn't work either.

    Any ideas would be greatly appreciated!!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Where will the information be written to?
    A <textarea> or between some <div> tags?

    What command are you using to write to the area?
    A 'document.write' or 'document.writeln' function?
    A 'document.getElementById('SomeID').innerHTML'?

  3. #3
    Join Date
    Dec 2009
    Posts
    16
    The information is written to a different page and is located inside a table. This other page references a javascript document where the arrays are located.

    Hope that makes things clearer....

    Thanks!

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by chavad View Post
    I need a line break between the two ingredients and nothing is working for me - I tried \n and other stuff;<br> is interpreted as part of the string and <pre> didn't work either.
    well, one of those should work. can you post the code so we can see if something else is wrong?

  5. #5
    Join Date
    Dec 2009
    Posts
    16
    Here is the code - nothing else should be wrong because my teacher majorly started me off.... As you can probably see, I need to have line breaks between the ingredients and directions instead of the text coming in as one solid block.

    Thanks so much!

    var r = new Array();

    r[0]=new Array("Apple Pie","Dessert","me","5-6 Cooking Apples 1 1/4 Cups Granulated Sugar 1 tsp Cinnamon 1/8 tsp Nutmeg Pastry for a two-crust pie 3 tbsp Butter or Margarine","1. Peel, core, and slice the apples. 2. Preheat the oven to 425 degrees. 3. Roll out half the dough and line a 9-inch pie plate with it. Arrange the apple slices over the bottom of the pastry, packing the slices closely and letting them pile up. 4. Combine the sugar, cinnamon, and nutmeg, and coat the apples with the mixture. Dot with tablespoons of butter or margarine. 5. Roll out the remaining dough. Wet the rim of the bottom crust and put the top crust on. Trim and crimp the crust. Prick the upper crust with a design. Bake the pie at 425 degrees for 15 minutes, then lower temperature to 375 for remaining 30 minutes or until pie begins to bubble through design and is delicately browned.");

  6. #6
    Join Date
    Dec 2009
    Posts
    16
    it it helps, each of these index elements comes into a separate box on a different page (so the ingredients are in one box and the directions are in another).

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i meant to imply we need to see the html that displays the recipes...

  8. #8
    Join Date
    Dec 2009
    Posts
    16
    <html>
    <head>
    <script src="recipes_code.js">
    </script>

    <script language="javascript">
    <!--
    //figure out recipe number (recipenum)
    var recipenum=getQueryStringPiece("r");

    //get recipe title for that number
    document.write("<title>" + getRecipeTitle(recipenum) + "</title>");
    //-->
    </script>



    </head>
    <body>
    <table cellpadding="15" align="center" border="1" width=1000px style="margin-top:50">
    <form>
    <tr>
    <td style="border:none"><strong>Recipe Name:</strong></td>
    <td><div style="width:500px;height:80px" id="recipe_name" name="recipe_name"></div></td>
    </tr>
    <tr>
    <td style="border:none"><strong>Category:</strong></td>
    <td><div style="width:500px;height:100px" id="recipe_category" name="recipe_category"></div></td>
    </tr>
    <tr>
    <td style="border:none"><strong>From the Kitchen of:</strong></td>
    <td><div style="width:500px;height:100px" id="kitchen_of" name="kitchen_of"></div></td>
    </tr>
    <tr>
    <td style="border:none"><strong>Preparation Time:</strong></td>
    <td><div style="width:500px;height:100px" id="prep_time" name="prep_time"></div></td>
    </tr>

    <tr>
    <td style="border:none"><strong>Cooking Time:</strong></td>
    <td><div style="width:500px;height:100px" id="cook_time" name="cook_time"></div></td>
    </tr>

    <tr>
    <td style="border:none"><strong>Servings:</strong></td>
    <td><div style="width:500px;height:100px" id="servings" name="servings"></div></td>
    </tr>

    <tr>
    <td style="border:none"><strong>Ingredients:</strong></td>
    <td><div style="width:500px;height:100px" id="ingredients" name="ingredients"></div></td>
    </tr>

    <tr>
    <td style="border:none"><strong>Instructions:</strong></td>
    <td><div style="width:500px;height:300px" id="instructions" name="instructions"></div></td>
    </tr>

    <tr>
    <td style="border:none"><strong>Comments:</strong></td>
    <td><div style="width:500px;height:100px" id="comments" name="comments"></div></td>
    </tr>

    </form>
    </table>
    <input type="button" name="back_link" value="Back to Main Page" onClick="location.href='main_area.html'" style="margin:20 180 10 600">

    <script language="javascript">
    <!--
    //get recipe title for that number

    var h=document.createTextNode( getRecipeTitle(recipenum));
    document.getElementById("recipe_name").appendChild(h);

    h=document.createTextNode(r[recipenum][1]);
    document.getElementById("recipe_category").appendChild(h);

    h=document.createTextNode(r[recipenum][2]);
    document.getElementById("kitchen_of").appendChild(h);

    h=document.createTextNode(r[recipenum][3]);
    document.getElementById("prep_time").appendChild(h);

    h=document.createTextNode(r[recipenum][4]);
    document.getElementById("cook_time").appendChild(h);

    h=document.createTextNode(r[recipenum][5]);
    document.getElementById("servings").appendChild(h);

    h=document.createTextNode(r[recipenum][6]);
    document.getElementById("ingredients").appendChild(h);

    h=document.createTextNode(r[recipenum][7]);
    document.getElementById("instructions").appendChild(h);

    h=document.createTextNode(r[recipenum][8]);
    document.getElementById("comments").appendChild(h);
    //-->
    </script>

    </body>
    </html>

  9. #9
    Join Date
    Dec 2009
    Posts
    16
    Sorry, I didn't realize - see the html above.

    Thanks!

  10. #10
    Join Date
    Dec 2005
    Posts
    2,984
    From looking at your array, there's nothing to really determine where there should be line breaks, there's no delimiter that says 'this ingredient finished, move onto the next one. In order to be able to format the text as you output it, then you require something to tell you how it should be formatted.

    For example, in your ingredient array you have:

    Code:
    5-6 Cooking Apples 1 1/4 Cups Granulated Sugar 1 tsp Cinnamon 1/8 tsp Nutmeg Pastry for a two-crust pie 3 tbsp Butter or Margarine
    Do you have access to control the database/XML file/text file/whatever that this stuff is stored in? If you do, then you need to store it as something that separates the ingredients, whether it be commas or br's:

    Code:
    5-6 Cooking Apples,1 1/4 Cups Granulated Sugar,1 tsp Cinnamon,1/8 tsp Nutmeg,Pastry for a two-crust pie,3 tbsp Butter or Margarine
    Barring this, there is really no way to reliably break up your string of ingredients into a list of ingredients on separate lines.

  11. #11
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    If you want to write to a textarea, just insert newline commands "\n". This was done in the next link.htm to create a narrative telling round robin participants how to create their schedule.

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Browsers do act in different ways when recognizing/setting a new line inside a textarea. The safer notation is "\n\r".

  13. #13
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by Kor View Post
    Browsers do act in different ways when recognizing/setting a new line inside a textarea. The safer notation is "\n\r".
    what?

    it's "\r\n" in IE and all windows files for that matter. That sait, just "\n" does seem to be fine for textareas in ie8...

  14. #14
    Join Date
    Dec 2005
    Posts
    2,984
    As much as I understand how posts started to get onto the topic of \r\n - through wbport's post about textareas, because s/he apparently didn't read enough of this thread to realize what the actual problem was - I must post again and refer the OP back to my post (#10) as it describes what the actual problem is and how to fix it.....and it has nothing to do with textareas, \n's, \r\n's, or br's.

  15. #15
    Join Date
    Jan 2009
    Posts
    3,346
    Is there a particular reason the ingredients aren't an array themselves?

    [0][0] = "Apple Pie"
    [0][1] = "Dessert"
    [0][2][0] = "5-6 Cooking Apples"
    [0][2][1] = "1 1/4 Cups Granulated Sugar."

    etc...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles