The empty spaces are ignored by the "InnerText" property

Question

I want that when i press on any keyboard key the string which is stored in the "array" variable (as an array) be written in the "p" element but the problem is that when I put an empty space in the "string" variable(by tab key or space key) it doesn't write those empty spaces, so the sentence would be like this: "Helloworld".

window.onload = () => {
    let log = document.getElementById("log");
}
let string = "  Hello world \n  How are you ?";
let array = string.split("");
let i = 0;
log.addEventListener("click", () => {
    document.addEventListener("keypress", type);
})
function type() {
    log.innerText += array[i];
    i++;
    if (array[i] === undefined) {
        document.removeEventListener("keypress", type);
    }
}

#log {
    height: 50vh;
    width: 450px;
    padding: 15px;
    position: absolute;
    left: 10px;
    color: rgb(0, 255, 0);
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
}
#log::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 20px;
    background-color: rgb(0, 255, 0);
    animation-name: green;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes green {
    0% {background-color: rgb(0, 255, 0);}
    25% {background-color: transparent;}
    50% {background-color: rgb(0, 255, 0);}
    75% {background-color: transparent;}
    100% {background-color: rgb(0, 255, 0);}
}

<p id="log"></p>

Does this answer your question? [How do I preserve line breaks when getting text from a textarea?](https://stackoverflow.com/questions/40417527/how-do-i-preserve-line-breaks-when-getting-text-from-a-textarea) — Ivar, May 25 '22 at 12:50

James · Accepted Answer · 2022-05-25T13:32:26.180

Rather than reading from element.innerText, store the "text so far" in another string variable, and set the innerText to the value of that variable.

window.onload = () => {
    let log = document.getElementById("log");
}
let string = "  Hello world \n\tHow are you ?";
let array = string.split("");
let i = 0;
let words = "";
log.addEventListener("click", () => {
    document.addEventListener("keypress", type);
})
function type() {
    words += array[i];
    log.innerText = words;
    i++;
    if (array[i] === undefined) {
        document.removeEventListener("keypress", type);
    }
}

#log {
    height: 50vh;
    width: 450px;
    padding: 15px;
    position: absolute;
    left: 10px;
    color: rgb(0, 255, 0);
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
}
#log::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 20px;
    background-color: rgb(0, 255, 0);
    animation-name: green;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes green {
    0% {background-color: rgb(0, 255, 0);}
    25% {background-color: transparent;}
    50% {background-color: rgb(0, 255, 0);}
    75% {background-color: transparent;}
    100% {background-color: rgb(0, 255, 0);}
}

<pre id="log"></pre>

A tab will only be detected if "\t" is in the string. There is no difference between a space created with the spacebar and a space created with the tab key otherwise. Here I changed the html element from a `
` to a `
` which will keep the whitespace formatting intact. — James, May 25 '22 at 13:31

The empty spaces are ignored by the "InnerText" property

1 Answers1