"(空格)字符在InnerText中被忽略

Question

"(空格)字符在InnerText中被忽略

我正在尝试创建一个函数(在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)
        }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如您所见,数组中有一些""(空格)字符; 问题是它没有写那些空格,所以句子就像这样:"Hellohowareyou".我该如何解决这个问题？

Answer 1

JJJ*_*JJJ 33

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

虽然其他答案肯定是正确的,并包含有用的信息,但这个答案带来了一些重要的东西,甚至没有发生在我身上.GJ (2认同)

Answer 2

Ger*_*ado 12

怎么用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)
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

innerText由IE引入,众所周知,IE没有任何好处.开玩笑说,这是一个很好的解释:"穷人,被误解的内心文本".

@Teemu 更准确地说，[它最近被 WHATWG 采用](https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute)。 (2认同)

归档时间：	7 年，9 月前
查看次数：	4407 次
最近记录：	6 年，2 月前