...

View Full Version : Writing line break in JS



spacepoet
01-08-2012, 05:52 PM
Hello:

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

This is fine:


<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:


<script>

document.write("Hello and welcome to javascript! \n");
document.write("It is a tricky language to learn!")

</script>




<script>

document.writeln("Hello and welcome to javascript!");
document.writeln("It is a tricky language to learn!")

</script>



Am I missing something?

Amphiluke
01-08-2012, 06:00 PM
Why not simply output a line break explicitly?

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

DanInMa
01-08-2012, 07:08 PM
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.

spacepoet
01-09-2012, 04:15 AM
Hi:

I tried the type attribute already:


<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?

xelawho
01-09-2012, 04:32 AM
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:

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

Old Pedant
01-09-2012, 06:46 AM
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:


<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/>

jmrker
01-09-2012, 02:44 PM
Hi:

I tried the type attribute already:


<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. :D

spacepoet
01-10-2012, 05:09 PM
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:



<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?

Philip M
01-10-2012, 05:20 PM
<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)

Old Pedant
01-10-2012, 07:56 PM
Philip is exactly correct.

Look, SpacePoet, your code (from post #8) would result in the following HTML:


<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


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


<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


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.

Old Pedant
01-10-2012, 08:00 PM
Is there a better or more modern way to do the above?

Yes.



<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>

felgall
01-10-2012, 08:08 PM
Or even more modern:


<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.

Old Pedant
01-10-2012, 08:18 PM
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


<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.)

spacepoet
01-10-2012, 10:39 PM
...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.

xelawho
01-10-2012, 10:54 PM
... is nobody going to mention our old friend DOM?



<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>

Old Pedant
01-10-2012, 11:29 PM
Chrome and MSIE 9 both have builtin debugger that are, if anything, even better then FireFox.

But any of them are more than adequate for most usage. Most of the time all you want to do is set breakpoints and inspect variables, and they all do that just fine.

Just avoid MSIE 8 and below. You *can* debug them using the MS Script Debugger or using Visual Studio (any variety), but not as easily as with any other browser.

**********

Don't be afraid of document.write, esp. in early lessons, but don't think it does anything magic that is outside of the rules of HTML.

spacepoet
01-11-2012, 08:01 PM
I will look into those debuggers ... just taking each lesson in my own time now that I have some to devote to me .. lol ..

DOM: Thanks for posting that. I believe I get the idea.

I did this book because it is teaching about DOM and gives good, simple examples and then builds upon them.

Should be an interesting trip ..

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum