Menu
I'm trying to write a function (in JavaScript) that would write a sentence in a <p> tag by writing its letters one by one with a 300ms pause between each letter, for exmaple. I've written the following:
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>As you can see, there are some " " (empty space) characters in the array; the problem is that it doesn't write those empty spaces, so the sentence would be like this: "Hellohowareyou". How do I solve this?
914
Don't use presentation as data. Store the current content as a separate string, don't pull it from the DOM. This way you're not dependent on how the browser stores the element's text content.
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>As a side note, the same thing could be made a lot simpler:
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>What about using 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>You can also use 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 was introduced by IE and, as we all know, nothing good comes from IE. Joking apart, this is a good explanation about it: "The poor, misunderstood innerText".
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
