Why is Squiffy ignoring my setTimeout?

    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.


Thank you!


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.


This topic is now closed. Topics are closed after 180 days of inactivity.

Support

Forums