var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
window.myFunction = function(typeWriter) {
while (i < txt.length) {
document.getElementById("type").innerHTML += txt.charAt(i);
setTimeout(typeWriter, 50); /*ππ’π¦ππππͺ ππ¦π€π₯ ππππ π£ππ€ π₯πππ€ ππππ.*/
i++;
}
}
<button onclick="myFunction()">Click me</button>
<span id="type"></span>
You are creating a function with a single parameter typeWriter
. You call the function with myFunction()
, so the variable typeWriter
will be undefined.
So, your line setTimeout(typeWriter, 50);
has the effect of telling the browser to start a timer and run an unspecified function after 50ms.
The line isn't actually ignored. If you check the javascript console, you will see:
Uncaught ReferenceError: typeWriter is not defined
. The loop then stops because of the error.
If you passed a function in as typeWriter
, your function would have the effect of putting the txt
string into the type
span, then waiting 50 miliseconds and running typeWriter
once for each character that was added.
Given the function name, I suspect that what you actually wanted might be:
var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
window.typeWriter = function() {
if (i < txt.length) {
document.getElementById("type").innerHTML += txt.charAt(i++);
setTimeout(typeWriter, 50);
}
};
<button onclick="typeWriter()">Click me</button>
<span id="type"></span>
Although in the real world, I would probably use
document.getElementById("type").innerHTML = txt.substring(0, i++);
which is a little more efficient, and will mess up slightly less if you feed it a txt with HTML tags in.
Okay, this is probably a dumb question. It certainly demonstrates how little I know. I don't even want anyone to answer it if it's complicated. So here goes: Why does the JavaScript in a section so very different from the Javascript in story.js?
Glad that's out of the way.
More relevant, how would I change Squiffy's @replace function so that, rather than fade in and out, it appears to backspace out and typewrite in?
mrangel's solution above works great , though. And that made it surprisingly easy and enjoyable to play with it to make it delete. I just think I want all of my future stories to have this effect. It just better creates the illusion that the player is interacting with a 'smart' machine. Fade-out-in tries and fails to be magical, in my opinion.