How can I add new line in JS? \n not working

Question

I am learning/refreshing/playing with data. In this example, I am looking for even and odd length string in sentence. But character for new line is not working. Can you show me what am I doing wrong? THANK YOU.

const evenOddLength = (t: string) => {
     let text = strings.split(' ')
      const even: string [] = []
     const odd: string [] = []

     for(let i = 0; i < text.length; i++) {
      if(text[i].length % 2 === 0) {
         even.push(text[i])
      } else {
        odd.push(text[i])
      }
     }

    setOutput(`Even string: [ ${even} ],` + "\n" + ` Odd string: [ ${odd} ]`) 

  }

Expected output should be:

Even string: [ String,be,iterated,loop ],
Odd string: [ The,Array,can,using,the,for ]

but I am getting :

Even string: [ String,be,iterated,loop ], Odd string: [ The,Array,can,using,the,for ]

Can you show the code for the `setOutput` function? Maybe that's where the problem is Also, on an unrelated note, you can probably use `Even string: [ ${even} ],\n Odd string: [ ${odd} ]` which is cleaner :) — TheCoder - or rather ACoder, May 01 '23 at 03:54
I am learning typescript and with that refreshing data modeling. :) — erza, May 01 '23 at 03:59
HTML doesn't render `\n`. https://stackoverflow.com/questions/39325414/line-break-in-html-with-n — Haoliang, May 01 '23 at 04:04

score 0 · Answer 1 · answered May 01 '23 at 04:56

To do a line break in HTML, you should use the <br> tag instead of \n

let even = [];
let odd = [];
function evenOddLength(t) { 
   let text = t.split(' ');

   for(let i = 0; i < text.length; i++) {
      if(text[i].length % 2 === 0) {
        even.push(text[i]);
      } else {
        odd.push(text[i]);
      }
   } 
} 

evenOddLength('The Array can using the for String be iterated loop');
document.getElementById("useJsNewLine").innerHTML = `* Using Javascript line break (\\n): Even string: [ ${even} ],` + "\n" + ` Odd string: [ ${odd} ]`;
document.getElementById("useHtmlBrTag").innerHTML = `* Using HTML line break (br tag):<br/>Even string: [ ${even} ],` + "<br/>" + ` Odd string: [ ${odd} ]`;

<p id="useJsNewLine">Using Javascript line break (\n):</p>
<p id="useHtmlBrTag">Using HTML line break (br tag):</p>

How can I add new line in JS? \n not working

1 Answers1