...

View Full Version : Line break a string to 2 lines in text field



Lisawynn
02-05-2004, 10:04 PM
Hello. I am trying to figure out how to line break a string to show up as 2 lines in a text form field.

here is the code:

function ourdate(){
var time=new Date();
var myMonth=months[time.getMonth()];
var myDate=time.getDate();
var myYear=time.getFullYear();
var hr=time.getHours();
var min=time.getMinutes();
var sec=time.getSeconds();
var temp = "" + ((hr > 12) ? hr - 12 : hr)
if(hr==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((min < 10) ? ":0" : ":") + min
temp += ((sec < 10) ? ":0" : ":") + sec
temp += (hr >= 12) ? " PM" : " AM"
document.clock.current.value = myYear + " " + myMonth + " " + myDate + temp
setTimeout("ourdate()", 1000)
}


Currently, it shows up like this:

2004 February 5 2:42

The date and time should show up in the current text box on two lines like this

2004 February 5
2:42

so temp needs to be "broken" from the string and put on a new line but I can't figure out how to get the line to break. Maybe splitting the string? Any help would be appreciated. Thanks!

Antoniohawk
02-05-2004, 10:43 PM
Try something like so


document.clock.current.value = myYear + " " + myMonth + " " + myDate + " \n" + temp;

Roy Sinclair
02-05-2004, 10:45 PM
The newline character can be inserted between the fields and in a Textarea it will break them up into separate lines.



document.clock.current.value = myYear + " " + myMonth + " " + myDate + "\n" + temp

Lisawynn
02-05-2004, 10:56 PM
When I use /n where suggested, I get an error and the text field is completely empty

Line: 32
Char: 71
Error: Expected ':' Do you wish to debug, click No and then

a Runtime error:

Line 38: Object expected

Line 38 is the body onLoad indicated below although I know that sometimes where an error is indicated is not always where you find it.

</script>
</head>
<body onLoad="ourdate()">
<Form name="clock">

If I take out /n, no error messages but the date and time ends up on the same line again.

Roy Sinclair
02-05-2004, 11:22 PM
\n not /n -- that's why it's causing problems

Lisawynn
02-06-2004, 02:40 PM
I am sorry about that. I did have \n and I have also tried \r and the line will not break. I am obviously missing something in the code that is causing it to not want to break the line. I will keep trying. Thanks for your suggestions.

Roy Sinclair
02-06-2004, 04:03 PM
You are putting the output into a TEXTAREA control right? If you're going into an <input type="text"... then you've misunderstood the html since that control is always one line, no breaks allowed.

Lisawynn
02-06-2004, 04:18 PM
From the example provided by my instructor, it appears that he wants it in a text area like you indicated. input type="text".

This is the entire script. My instructor's example is indicating he wants the date in the top of the cell and the time underneath, in the same cell/text box. If you look at the page, it looks exactly like his except for the problem I am having with the date format. His instructions indicate: In a text box, show the local date and time ticking; In another text box, show the UTC date and time ticking. This is as much as I have so far and I am working on the remaining portions but, as you know, this is the only difficutly I am having. Thanks very much for your suggestions and your help.

<html>
<head>
<script language="javascript">
var months=new Array();
months[0]="January";
months[1]="February";
months[2]="March";
months[3]="April";
months[4]="May";
months[5]="June";
months[6]="July";
months[7]="August";
months[8]="September";
months[9]="October";
months[10]="November";
months[11]="December";

function ourdate(){
var time=new Date();
var myMonth=months[time.getMonth()];
var myDate=time.getDate();
var myYear=time.getFullYear();
var hr=time.getHours();
var min=time.getMinutes();
var sec=time.getSeconds();
var temp = "" + ((hr > 12) ? hr - 12 : hr)
if(hr==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((min < 10) ? ":0" : ":") + min
temp += ((sec < 10) ? ":0" : ":") + sec
temp += (hr >= 12) ? " PM" : " AM"
document.clock.current.value = myYear + " " + myMonth + " " + myDate + "\n" + temp
setTimeout("ourdate()", 1000)

}

function UTCdate(){
var UTCtime=new Date();
var myUTCMonth=months[UTCtime.getMonth()];
var myUTCDate=UTCtime.getUTCDate();
var myUTCYear=UTCtime.getUTCFullYear();
var UTChr=UTCtime.getUTCHours();
var UTCmin=UTCtime.getUTCMinutes();
var UTCsec=UTCtime.getUTCSeconds();
var UTCtemp = "" + ((UTChr > 12) ? UTChr - 12 : UTChr)
if(UTChr==0) UTCtemp = "12"
if(UTCtemp.length==1) UTCtemp = " " + UTCtemp
UTCtemp += ((UTCmin < 10) ? ":0" : ":") + UTCmin
UTCtemp += ((UTCsec < 10) ? ":0" : ":") + UTCsec
UTCtemp += (UTChr >= 12) ? " PM" : " AM"
document.clock.UTC.value = myUTCYear + " " + myUTCMonth + " " + myUTCDate + "\r" + UTCtemp
setTimeout("UTCdate()", 1000)

}

</script>
</head>
<body onLoad="ourdate(); UTCdate()">
<Form name="clock">
<SELECT name=s1> <OPTION value=0 selected>Ottawa, Canada</OPTION>
<OPTION value=1>Washington,DC U.S.A.</OPTION>
<OPTION value=2>Mexico City, Mexico</OPTION>
<OPTION value=3>Paris, France</OPTION>
<OPTION value=4>Rome, Italy</option>
<option value=5>Dublin, Ireland</option>
<option value=6>Lisbon, Portugal</option>
<option value=7>Stockholm, Sweden</option></SELECT>
<p>
<p>
<table>
<Table border=2>
<td></td>
<td>Your Time</td>
<td>City drop down menu</td>
<tr>
<td height="40">Local
</td>
<td><input type="text" name="current" style="height: 40px"></td>
<td><input type="text" name="tb2" style="height" 40px"></td>
<tr>
<td>UTC</td>
<td><input type="text" name="UTC" style="height: 40px"></td>
<td><input type="text" name="tb4" style="height: 40px"></td>
</table>
</body>
</html>

Roy Sinclair
02-06-2004, 04:37 PM
The problem is in putting the output into a form field, <input type="text"> simply doesn't accept multiple lines. You could however put an ID onto the TD tag (<td id="cerrent"></td> instead of <td><input type="text" name="current" style="height: 40px"></td>).

Then use (document.getElementById('current').innerHTML = myYear + " " + myMonth + " " + myDate + "<br />" + temp) to set the value. Note that it's back to html so I replaced the \n with a <br />.

Lisawynn
02-06-2004, 05:07 PM
Works perfectly. Thanks VERY much for taking the time and providing your assistance and guidance. Greatly appreciated!!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum