Question

我正在尝试创建一个函数（在JavaScript中）通过在每个（例如）300毫秒（在<p>标记中）逐个编写其字母来编写句子。我写了这个：

        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>

正如您所看到的，数组中有一些“”（空格）字符;问题是它没有写那些空格，所以句子就像这样：“Hellohowareyou”。我该如何解决这个问题？

Answer 1

不要将演示文稿用作数据。将当前内容存储为单独的字符串，不要将其从DOM中提取。这样，您就不依赖于浏览器如何存储元素的文本内容。

＆＃13;

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)
}

＆＃13;

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

＆＃13;

作为旁注，同样的事情可以变得更简单：

＆＃13;

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)
}

＆＃13;

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

＆＃13;

Answer 2

如何使用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>

您还可以使用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>

IE引入了

innerText，众所周知，IE没有任何好处。开玩笑，这是一个很好的解释："The poor, misunderstood innerText"。

Answer 3

其他答案解决了您的代码问题，但我想解决整个计划的问题。

你真的想要定义一个字符数组吗？长句会很糟糕。如果你想要变量文本怎么办？请改用：
```
var input = "Hello how are you?";
var text = input.split(""); // split into array of characters
```
说到更长的句子，你的＆＃34;打字机＆＃34;将填写当前行，意识到它没有空间，然后将最后一个字压缩到下一行以完成它。这不好看！你可以通过一个聪明的伎俩解决这个问题：
```
<p><span id="visible_text">Hello how a</span><span id="remaining_text">re you?</span></p>
<style>#remaining_text {visibility:hidden}</style>
```
这不仅可以很好地处理自动换行，而且还可以保留＆＃34;提前留出必要的空间，这样你就不会在新的线条出现时将打印机下面的内容推到页面下方。

您可以通过计算您所处的角色位置轻松实现此效果，然后将input字符串拆分为该偏移处的两个部分。将第一部分放在第一部分<span>中，其余部分放在第二部分中，然后你就变成了金色。

来源：我在我的＆＃34; RPG过场动画＆＃34;式代码中使用了这种技术。实际上是一个更高级的版本，因为我的也支持HTML而不仅仅是纯文本！

Answer 4

您需要使用 引入空格并使用innerHTML代替innerText

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

修改

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

<强>演示

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>

Answer 5

我修改了您的代码，以展示如何使用slice method来创建更简洁，更优雅的代码。

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>

Answer 6

简短答案：使用textContent属性代替innerText属性，您将可以添加空格。

例如

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>

另外，请注意，Konrad Rudolph和bergi在有关问题的评论中直接回答了原因。

Answer 7

这个问题是MVC模式的一个很好的选择。我在blog中讨论了这个确切的问题。我在下面为这个问题提供了一个MVC。（请原谅无耻的自我推销。）

＆＃13;

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();
 }

＆＃13;

<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>

＆＃13;

“（空格）字符在InnerText中被忽略

7 个答案: