CODEWITHSUNDEEP
javascript
Sarah
Sarah

Reputation: 88

why is javascript parameter undefined?

I'm getting the error that "txtname" is undefined.

    let i = 0;
let txtOne = 'Hi';
let txtTwo = 'My name is Sarah';
let txtThree = "and I'm learning web development";
let speed = 200; 
let firstdiv = document.querySelector(".firstOne");
let nextdiv = document.querySelector(".nextOne");
let lastdiv = document.querySelector(".lastOne");

function typeWriter(txtname, divname) {
    if (i < txtname.length) {
divname.innerHTML += txtname.charAt(i);
       i++;
        setTimeout(typeWriter, speed);
    }
}

window.onload = typeWriter(txtOne, firstdiv);
firstdiv.addEventListener("animationend", typeWriter(txtTwo, nextdiv));
nextdiv.addEventListener("animationend", typeWriter(txtThree, lastdiv));

Why is txtname coming up as undefined? Shouldn't it get replaced by whatever I pass as an argument in my typeWriter function? Why isn't the typeWriter function looking at txtOne.length or txtTwo.length etc?

I'm still in the process of learning javascript so please excuse me if this is a basic error.

Upvotes: 1

Views: 69

Answers (1)

user229044
user229044

Reputation: 239270

setTimeout(typeWriter, speed) means that in 200 ms, typeWriter will be invoked with no arguments. The arguments from the previous invocation are not carried forward automatically to the next invocation, you need to supply them. You can do so with an anonymous function:

setTimeout(function () { typeWriter(txtname, divname) }, speed)

While you're fixing this, you should probably also move state like i into the function, rather than depending on global state. You can do so by accepting i as an argument, but giving it a default value of 0:

function typeWriter(txtname, divname, i) {
    i || (i = 0);

    if (i < txtname.length) {
        divname.innerHTML += txtname.charAt(i);
        setTimeout(function () { typeWriter(txtname, divname, i + 1) }, speed);
    }
}

This is a common pattern with recursive functions.

Another issue is the way you are setting the event handlers. You are actually setting the returned value of the typeWriter function as the event handler instead of the function itself. You should remove the invocation operator, i.e. window.onload = typeWriter, but since you want to call the function with specific parameters, you need to wrap the code with another function:

window.onload = function() { typeWriter(txtOne, firstdiv) };
firstdiv.addEventListener("animationend", function() { typeWriter(txtTwo, nextdiv) });
nextdiv.addEventListener("animationend", function() { typeWriter(txtThree, lastdiv) });

Upvotes: 4

Related Questions