why is javascript parameter undefined?

Question

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.

user229044 · Accepted Answer · 2018-09-18 14:51:11Z

4

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

edited Sep 18, 2018 at 14:51

community wiki

user229044

Sign up to request clarification or add additional context in comments.

3 Comments

Ram Over a year ago

There are more issues in her code: e.g. window.onload = typeWriter(txtOne, firstdiv);

user229044 Over a year ago

@undefined True, I'm going AFK for a while and cannot expand on my answer

Sarah Over a year ago

Thank you for explaining about setTimeout, meagar. Don't worry about the other issues, now that I have this one I can try to figure out the rest.

Collectives™ on Stack Overflow

why is javascript parameter undefined?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related