How do I prevent HTML from ignoring the newline that comes from JavaScript?

December 6, 2021

I’d like to write my own hackertyper site that prints itself when pressing some keys.

But when I try the code below, it prints everything at the same line. I used template literals(“) and couldn’t make it. Then tried <br /> in the string but also not worked. How do I make it right?

Edit: I was using <p> tag in the HTML file, when I changed it to <pre> tag as Praveen said, it solved my problem. Thank you.

"use strict";

let str = `"use strict"

let str = "";

let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});`;

let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});

>Solution :

I guess if you’re trying to print it out, you need to print it out on a <pre> tag or an element with style white-space: pre or similar.

Here’s an example with <pre> tag:

let str = `This is HackerTyper

See I have   spaces and lines!`;

let emptyStr = "";

let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});

<pre id="string"></pre>

Here’s the same with white-space: pre for <div>:

let str = `This is HackerTyper

See I have   spaces and lines!`;

let emptyStr = "";

let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});