Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    62
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Writing line break in JS

    Hello:

    First post here on CS ... I am wondering why my code will not write a new line or line break.

    This is fine:
    Code:
    <script>
    
    document.write("Hello and welcome to javascript!");
    
    </script>
    But when I try to put a message on two lines, it does not work. The book I'm reading and several websites have stated the below codes will work, but neither do:
    Code:
    <script>
    
    document.write("Hello and welcome to javascript! \n");
    document.write("It is a tricky language to learn!")
    
    </script>
    Code:
    <script>
    
    document.writeln("Hello and welcome to javascript!");
    document.writeln("It is a tricky language to learn!")
    
    </script>
    Am I missing something?

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Why not simply output a line break explicitly?
    Code:
    document.write("Hello and welcome to javascript!<br />");
    document.write("It is a tricky language to learn!")
    I am still learning English

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well the code looks fine. maybe try including the type attribute in your script tag, and make sure your using a valid document type for the page itself.

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    62
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Tried that ..

    Hi:

    I tried the type attribute already:
    Code:
    <script type="text/javascript">
    
    document.write("Hello and welcome to javascript! \n");
    document.write("It is a tricky language to learn!")
    
    </script>
    but is does not work that way, either ...

    Which is why I am confused ...

    Any other ideas?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    1. Find another way to display text. Almost all of them are better than document.write

    2. if you must, as per Amphiluke's suggestion:
    Code:
    <script type="text/javascript">
    document.write("Hello and welcome to javascript!<br>It is a tricky language to learn!");
    </script>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Here's some questions for you, SpacePoet.

    When was the last time you created some ordinary HTML?

    And when you did that, how did you force a line break on the screen?

    Didn't you use <br/> (or at least <br>)??

    So why would you think that creating line breaks from JavaScript would be any different?

    Looks to me like you completely ignored Amphiluke's advice in post #2.

    FWIW, this is an HTML thing, nothing to do with JavaScript. HTML *requires* that browsers treat *ALL* "whitespace" (that is, spaces, line breaks, tabs, etc.) the same. To wit: Any number of ANY kind of whitespace is rendered on the screen as a single space character.


    ********

    N.B.: Of course there are other ways to get a line break with HTML.

    Examples:
    Code:
    <pre>
        The pre tag will preserve
        line breaks and all spaces.
    </pre>
    
    ...
    
    <textarea>
       And textareas preserve line
       breaks and spaces as well.
    </textarea>
    But by far the most common thing to use is <br/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by spacepoet View Post
    Hi:

    I tried the type attribute already:
    Code:
    <script type="text/javascript">
    
    document.write("Hello and welcome to javascript! \n");
    document.write("It is a tricky language to learn!")
    
    </script>
    but is does not work that way, either ...

    Which is why I am confused ...

    Any other ideas?
    Also, because we don't see any other code that might be on the page,
    be sure that you are not overwriting the document.write with
    a later part of your program.

  • #8
    New Coder
    Join Date
    Jul 2006
    Posts
    62
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Let me explain...

    Hello:

    Thanks for the replies but it didn't answer the question to why it is not working. Do modern browsers not support this code anymore?

    I know I can use "<br />" or CSS "clear: both", etc.

    I am starting JS from the beginning and following code examples from a book (Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites - Robin Nixon). I find it to be a good book, but this simple code does not work:

    Code:
    <html>
    
    <head></head>
    
    <body>
    
    <script type="text/javascript">
    
    document.write("Hello and welcome to javascript! \n");
    document.write("It is a tricky language to learn!")
    
    </script>
    
    </body>
    
    </html>
    All of the examples I have found on other sites use the same "\n" or "document.writeln (Which I am told does not work in xhtml)."

    The point is I am trying to learn to write JS code from the very beginning so I can get better at writing my own code.

    Is there a better or more modern way to do the above?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,912
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <script type="text/javascript">

    document.write("Hello and welcome to javascript! <br>");
    document.write("It is a tricky language to learn!");

    alert ("Hello and welcome to javascript! \nIt is a tricky language to learn!")

    </script>


    <br> is the HTML code for a newline. document.write() outputs HTML.

    \n is the Javascript code for a newline. Windows translates that internally into \r\n (Carriage Return - Line Feed or CRLF)
    Last edited by Philip M; 01-10-2012 at 05:22 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Philip is exactly correct.

    Look, SpacePoet, your code (from post #8) would result in the following HTML:
    Code:
    <html>
    <head></head>
    <body>
    Hello and welcome to javascript!
    It is a tricky language to learn!
    </body>
    </html>
    That is, the JavaScript code would indeed put a LINE BREAK after the first line created by document.write, thanks to the \n in there.

    But now that you has done that writing, it is up to the browser to follow the HTML rules.

    And, as I said, HTML dictates that multiple whitespace characters are converted into a single space.

    So that will render on the screen as simply
    Code:
    Hello and welcome to javascript! It is a tricky language to learn!
    Look, I know you know ASP coding. In ASP you might code this as
    Code:
    <html>
    <head></head>
    <body>
    <%
    Response.Write "Hello and welcome to javascript!" & vbNewLine
    Response.Write "It is a tricky language to learn!"
    %>
    </body>
    </html>
    And surely if you did that from ASP you would NOT be surprised to find that there is no line break in the screen presentation. Surely you would instead use
    Code:
    Response.Write "Hello and welcome to javascript!<br/>"
    to force the line break. Right?

    So WHY are you surprised to find that you must use <br/> with JavaScript, as well?????

    **********

    In any case, document.write should almost be outlawed. It's quite often a really bad choice when using JavaScript to create page content. For one thing, if you use document.write *after* a page is fully loaded, you WIPE OUT all content on the page (including even the JavaScript that did the document.write!). So okay, use document.write when you are playing around, but then be prepared to stop using it except on rare occasions.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Is there a better or more modern way to do the above?
    Yes.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function addMessage( )
    {
        document.getElementById("message").innerHTML = 
              "Hello and welcome to javascript!<br/>"
            + "It is one of the easiest of all languages to learn!";
    } 
    window.onload = addMessage;
    </script>
    </head>
    <body>
    Demonstration:
    <div id="message">this will be wiped out</div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,616
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Or even more modern:

    Code:
    <html>
    <head>
    </head>
    <body>
    Demonstration:
    <div id="message">this will be wiped out</div>
    
    <script type="text/javascript">
    (function() {
        document.getElementById("message").innerHTML = 
              "Hello and welcome to javascript!<br/>"
            + "It is one of the easiest of all languages to learn!";
    })();
    </script>
    </body>
    </html>
    This variant provides the following additional benefits:

    1. The rest of the page loads faster when the JavaScript is at the bottom.
    2. The JavaScript runs sooner because it doesn't have to wait for everything else in the page to load.
    3. It is as completely unobtrusive as it can be and will not interfere with any other JavaScript in the page (unless that JavaScript also wants to update the same id.
    Last edited by felgall; 01-10-2012 at 08:13 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ummm...why do you need a function? What does that buy you?

    If you want to put the JS after the HTML, you could simply do
    Code:
    <html>
    <head>
    </head>
    <body>
    Demonstration:
    <div id="message">this will be wiped out</div>
    
    <script type="text/javascript">
        document.getElementById("message").innerHTML = 
              "Hello and welcome to javascript!<br/>"
            + "It is one of the easiest of all languages to learn!";
    </script>
    </body>
    </html>
    (Yes, yes, I know...in many other situations the function will be advantageous...such as when you need to use variables and don't want name clashes.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Jul 2006
    Posts
    62
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Ok ...

    ...thanks for clarifying ... that makes more sense to me...

    This is why learning some of this has been difficult for me. The book is a good book and very recent, but the first intro to JS and the code doesn't work .. lol ..

    I will stick with the "innerHTML" examples .. what does "innerHTML" do, anyway?

    One interesting question: I am noticing a tread - as mentioned - of adding the JS after the rest of the content (at least I have been coming across this is some HTML5 code).

    Good idea or not? I know it will not work until after it has loaded - which is why I believe most JS is between the HEAD tags.

    Thanks for the tips.


    Anyway - onto lesson 2 - working with "Date();" an such ..


    Oh, one last thing - what is a good JS debugger to download. I know FireFox has one, but I was hoping for other options.

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts

    not to confuse things, but...

    ... is nobody going to mention our old friend DOM?

    Code:
    <script>
    bod=document.body;
    text1=document.createTextNode("Hello and welcome to javascript!")
    text2=document.createTextNode("It is a tricky language to learn!")
    brk=document.createElement("br")
    bod.appendChild(text1)
    bod.appendChild(brk)
    bod.appendChild(text2)
    </script>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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