The purpose of this JavaScript program is to enable the user to report a problem on a social network with all the pertinent information in his initial message.
The user enters the information by answering a set of questions on a form consisting of text boxes, &c. The answers are used to create an array of string literals, the elements of which are concatenated to form a single string. This string is then presented at the end of the page for the user to copy and then to paste on to the social-network page.
Hitherto this has been done by placing the string (using document.getElementById('divName').innerHTML) in a <div> set up for the purpose. That's fine: works in all five browsers and even on the Iphone.
Now, in order to make it easier for the user to make minor changes to the report before posting it (and to make it easier to copy), I want to be able to place the report not in a <div> but in a <textarea> part of the input form. This too is fine: works in Firefox, Chrome, Opera and Safari – even on the Iphone – but...
With some inevitability the only browser on the whole parade ground marching in step – MSIE – cannot handle it. It puts the information in the <textarea>– minus all the line feeds.
The array is initialized:
function createReport() { // [0] and [21] are constant.
outReportArray[0] = 'E M E R G E N C Y' + horizLine;
for (i=1 ; i<outReportArray.length ; i++) {
outReportArray[i] = '';
}
outReportArray[21] = 'Thank you.';
}
(Global variable horizLine is a sequence of m-rules (—) with a line feed at each end.)
As the user progresses through the form, the array is updated:
outReportArray[element] = label + value + (underLine ? horizLine : '
');
(The following also have been tried for generating the line feed: '\n', '\r\n', '\r', '
', '
')
The output string is continually rebuilt and pasted to the <textarea> so that when he arrives at the foot of the form he presses an 'update' button and is simply transferred to the <<textarea>:
outReportStr = ''; // Initialize the output string.
// Build the output string from the output array.
for (i=0 ; i<outReportArray.length ; i++) {
outReportStr += outReportArray[i];
}
// Populate the <textarea> 'outbox'.
document.getElementById('outbox').innerHTML = outReportStr;
Normally the content of the <textarea> looks like this:
E M E R G E N C Y
———————————
Name: John Doe
Land-line: (213) 555 1234
Cell-phone: (213) 555 1235
E-mail: JDoe@aol.com
———————————
Location of animal now:
Washington (St Landry Parish), La
———————————
&c.
(There's more to it but this demonstrates the layout required in the output.)
In Internet Explorer, however, each line feed is replaced by a single space:
E M E R G E N C Y ——————————— Name: John Doe Land-line: (213) 555 1234 Cell-phone: (213) 555 1235 E-mail: JDoe@aol.com ——————————— Location of animal now: Washington (St Landry Parish), La ——————————— &c.
My question is this: how do I make Internet Explorer include the required line feeds in the innerHTML transferred to <textarea> 'outbox'?
(I have tried creating a textNode consisting of the innerHTML and then appending it as a child to the <textarea>; no dice: what I then get are all the character-entity codes (&#...) instead of the characters themselves.)
I'm very much an amateur at this game so, quite apart from not wanting to impose anything more complicated than HTML, CSS and JavaScript on the user, I don't want to get involved with complicated add-ins and proprietary libraries. A front seat at the pearly gates to any-one that can help me solve this problem!
The opener re-bids
First let me express sincere thanks to all that responded to my question. I had had some doubt of even getting a response, never mind one so quick.
Your insightful answers not only solved my problem but taught me quite a bit about the languages I'm deploying way above my pay grade – even of one I've never used!
@Kolink and @JayC told me to use .value rather than .innerHTML (and Kolink was quite right to adopt a tone of admonishment). Although I was aware of .value as part of the process of transferring data from an input element to the program, it had not even occurred to me that it might be written to: d'oh! I believe is the term.
Thank you, @RobG also, for your account of the use of \u codes; when it came to using .value vice .innerHTML, that was an important part of the solution.
@deceze recommended, indeed pleaded, that I learn 'Markdown' (which I always thought was something retailers applied to merchandise they were putting in to the clearance sale). He didn't say whether that was for my benefit or for his as a possible respondent but, searching for it on Google, I found a very interesting alternative to the jEdit I use, its strength being that the 'code' (the Markdown version of the text) is legible by a human, which must make it much simpler to edit. Thank you, deceze, I'll look in to that in due course (I've even tried coding this message in it); for the time being, not to the best of my knowledge having Perl to hand, I shall have to stick with what I (almost) know.
And, naturally, you all qualify for a front seat at the pearly gates. Thank you all for making my first visit to such a forum both fruitful and enjoyable.
ΠΞ
