Leerzeichen werden von der InnerText-Eigenschaft ignoriert

Question 1

Ich versuche, eine Funktion (in JavaScript) zu schreiben, die einen Satz in a schreiben würde <p> Tag, indem Sie beispielsweise die Buchstaben nacheinander mit einer Pause von 300 ms zwischen den einzelnen Buchstaben schreiben. Folgendes habe ich geschrieben:

        var text = ["H", "e", "l", "l", "o", " ", "h", "o", "w", " ", "a", "r", "e", "y", "o", "u", "?"]
        function typeText() {
            var i = 0;
            var interval = setInterval(function () {
                var parag = document.getElementById("theParagraph");
                var paragOldText = parag.innerText;
                parag.innerText = paragOldText + text[i];
                i++;
                if (text.length == i)
                    clearInterval(interval);
            }, 200)
        }

<body>
    <p id="theParagraph"></p>
    <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

Wie Sie sehen können, enthält das Array einige Zeichen „ “ (Leerzeichen); Das Problem ist, dass diese Leerzeichen nicht geschrieben werden, also würde der Satz so lauten: “Hellohowareyou”. Wie löse ich das?

Question 2

Verwenden Sie keine Präsentation als Daten. Speichern Sie den aktuellen Inhalt als separaten String, ziehen Sie ihn nicht aus dem DOM. Auf diese Weise sind Sie nicht davon abhängig, wie der Browser den Textinhalt des Elements speichert.

var text = ["H", "e", "l", "l", "o", " ", "h", "o", "w", " ", "a", "r", "e", "y", "o", "u", "?"]
 
function typeText() {
    var i = 0;
    var paragText = "";
    var interval = setInterval(function () {
        var parag = document.getElementById("theParagraph");
        paragText += text[i];
        parag.innerText = paragText;
        i++;
        if (text.length == i)
            clearInterval(interval);
    }, 200)
}

<body>
    <p id="theParagraph"></p>
    <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

Als Randnotiz könnte dasselbe viel einfacher gemacht werden:

var text = "Hello how are you?";

function typeText() {
    var i = 0;
    var interval = setInterval(function () {
        var parag = document.getElementById("theParagraph");
        parag.innerText = text.substr(0, i);
        if (text.length == i)
            clearInterval(interval);
        i++;
    }, 200)
}

<body>
    <p id="theParagraph"></p>
    <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

Question 3

Was ist mit der Verwendung textContent?

var text = ["H", "e", "l", "l", "o", " ", "h", "o", "w", " ", "a", "r", "e", " ","y", "o", "u", "?"]

function typeText() {
  var i = 0;
  var interval = setInterval(function() {
    var parag = document.getElementById("theParagraph");
    var paragOldText = parag.textContent;
    parag.textContent = paragOldText + text[i];
    i++;
    if (text.length == i)
      clearInterval(interval);
  }, 200)
}

<body>
  <p id="theParagraph"></p>
  <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

Sie können auch verwenden innerHTML:

var text = ["H", "e", "l", "l", "o", " ", "h", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", "?"]

function typeText() {
  var i = 0;
  var interval = setInterval(function() {
    var parag = document.getElementById("theParagraph");
    var paragOldText = parag.innerHTML;
    parag.innerHTML = paragOldText + text[i];
    i++;
    if (text.length == i)
      clearInterval(interval);
  }, 200)
}

<body>
  <p id="theParagraph"></p>
  <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

innerText wurde von IE eingeführt und wie wir alle wissen, kommt nichts Gutes von IE. Scherz beiseite, das ist eine gute Erklärung dazu: “Der arme, missverstandene innere Text”.

Question 4

Die anderen Antworten behandeln die Probleme mit Ihrem Code, aber ich möchte Probleme mit Ihrem gesamten Plan ansprechen.

Wollen Sie wirklich ein Array von Zeichen definieren? Lange Sätze werden die Hölle sein. Und was ist, wenn Sie variablen Text wünschen? Verwenden Sie stattdessen Folgendes:
```
var input = "Hello how are you?";
var text = input.split(""); // split into array of characters
```

Apropos längere Sätze, Ihre “Schreibmaschine” wird die aktuelle Zeile ausfüllen, erkennen, dass sie keinen Platz hat, und dann das letzte Wort in die nächste Zeile schieben, um es zu beenden. Das sieht nicht gut aus! Das kannst du mit einem cleveren Trick umgehen:
```
<p><span id="visible_text">Hello how a</span><span id="remaining_text">re you?</span></p>
<style>#remaining_text {visibility:hidden}</style>
```
Dadurch wird nicht nur der Zeilenumbruch sehr gut gehandhabt, sondern auch der erforderliche Platz im Voraus “reserviert”, damit Sie nicht damit enden, dass der Inhalt unter der Schreibmaschine weiter nach unten auf der Seite verschoben wird, wenn neue Zeilen entstehen.

Sie können diesen Effekt leicht erzielen, indem Sie zählen, an welcher Zeichenposition Sie sich befinden, und dann die Zeichen teilen input String in zwei Teile an diesem Versatz. Legen Sie das erste Stück in das erste <span>der Rest in der zweiten, und du bist goldrichtig.

Quelle: Ich verwende diese Technik in meinem Code im Stil einer “RPG-Zwischensequenz”. Eigentlich eine fortgeschrittenere Version, da meine auch HTML statt nur reinem Text unterstützt!

Question 5

Sie müssen das Leerzeichen mit einführen   und verwenden innerHTML Anstatt von innerText

var paragOldText = parag.innerHTML;
parag.innerHTML = paragOldText + ( text[i].trim().length ? text[i] : "&nbsp;" ) ;

Bearbeiten

  wird mit nicht benötigt innerHTML

var paragOldText = parag.innerHTML;
parag.innerHTML = paragOldText + text[i] ;

Demo

var text = ["H", "e", "l", "l", "o", " ", "h", "o", "w", " ", "a", "r", "e", "y", "o", "u", "?"]

function typeText() {
  var i = 0;
  var interval = setInterval(function() {
    var parag = document.getElementById("theParagraph");
    var paragOldText = parag.innerHTML;
    parag.innerHTML = paragOldText + text[i];
    i++;
    if (text.length == i)
      clearInterval(interval);
  }, 200)
}

<body>
  <p id="theParagraph"></p>
  <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

Question 6

Ich habe Ihren Code geändert, um zu zeigen, wie Sie die verwenden können Slice-Methode für kürzeren, eleganteren Code.

var text = "Hello how are you?"
function typeText() {
var i = 0;
var parag = document.getElementById("theParagraph");
var interval = setInterval(function () {
    i++;
    parag.innerText = text.slice(0, i);
    if (i == text.length)
        clearInterval(interval);
    }, 200)
}

<body>
    <p id="theParagraph"></p>
    <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

Question 7

Kurze Antwort: Verwenden textContent Attribut statt innerText -Attribut und Sie können Leerzeichen hinzufügen.

z.B

var text = ["H", "e", "l", "l", "o", " ", "h", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", "?"] // Added missing space after "are"

function typeText() {
  var i = 0;
  var interval = setInterval(function() {
    var parag = document.getElementById("theParagraph");
    var paragOldText = parag.textContent; // Replaced "parag.innerText" with "parag.textContent"
    parag.textContent = paragOldText + text[i]; // Did it again.
    i++;
    if (text.length == i)
      clearInterval(interval);
  }, 200)
}

<body>
  <p id="theParagraph"></p>
  <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>
</body>

Bitte beachten Sie auch, dass Konrad Rudolph und Bergi das Warum in Kommentaren direkt auf die Frage beantwortet haben.

Question 8

Dieses Problem ist ein großartiger Kandidat für ein MVC-Muster. Ich bespreche genau dieses Problem in meinem bloggen. Ich habe unten ein MVC für dieses Problem bereitgestellt. (Bitte entschuldigen Sie die schamlose Eigenwerbung.)

const Model = function(){
   const self = this;
   self.index = 0;
   self.text = ["H", "e", "l", "l", "o", " ", "h", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", "?"];
   self.textString = "",
   self.accumulate = function(){
     const length = self.text.length;
     self.textString = self.textString + self.text[self.index];
     self.index = ++self.index % length;
   }
 }
  const Controller = function(model, elem, milsec){
   const self = this;
   self.elem = elem;
   self.start = function(){
     const interval = setInterval( function(){
      if(model.index===model.text.length-1){
       clearInterval(interval);
     }
       model.accumulate();
       self.elem.innerText = model.textString;   
     }, milsec);
   }
 }
 
 const typeText = function(){
   const model = new Model();
   const theParagraph = document.getElementById('theParagraph');
   const controller = new Controller(model, theParagraph, 200);
   controller.start();
 }

<body>
    <p id="theParagraph"></p>
    <button id="typeButton" onclick="typeText()" style="padding:15px">Start typing the sentence</button>

<p>
  I invite you to go to my <a target="_top" href="https://www.monilito.com/blog/Never-Use-Presentational-Structures-to-Store-State">blog article</a> for an interesting take on this problem.
</p>
</body>