How do I start a new line in this JavaScript .text line?

Question

So I'm new to javascript and I'm exploring it by developing a simple clock on a FitBit. Here's my code:

if (hours < 12){
    myLabel.text = `${hours}:${mins}:${secs}:${"AM"}:${"\n"}:${"Sunday"}`;
  }

I want it to print the following:

Hours, Minutes, Seconds
Sunday

However, it's printing everything on the same line:

Hours, Minutes, Seconds, Sunday 

I've tried \n but that didn't work. Thanks!

Answer 1

Firstly, `${"\n"}` is equivelent to `\n` . Likewise AM and Sunday unless you make them dynamic in the future.

Secondly, \n should be used to line break JS strings, not HTML text.

Eg,

let str = 'line 1 \n line 2`; // this is fine

element.textContent = 'line 1 \n line2'; // this is bad

<element>line 1 \n line 2</element> // (HTML) this is bad

The reason is because most (see HTML pre and CSS white-space for exceptions) HTML elemnts will be rendered with disregard to superflous white space and new lines.

Instead, you should use seperate elements if you want to explicitly present a new line in HTML. Eg

<p>line 1</p>
<p>line 2</p>

In your case,

 let hours = 3, mins = 5, secs = 7; if (hours < 12) { document.querySelector('#line1').textContent = `${hours}:${mins}:${secs}:AM`; document.querySelector('#line2').textContent = 'Sunday'; }

 <label> <div id="line1"></div> <div id="line2"></div> </label>

Answer 2

You need to use a element for multiline. Then from JavaScript, you use \n for a line break, or just an actual line break in the SVG.

Ref:https://twitter.com/fitbitdev/status/930945957151178752?lang=en

Sol: https://dev.fitbit.com/build/guides/user-interface/svg/