We Keep Coding

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.

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

How to run through a function again once it reaches the end?

How to run through the loop again once it reaches the last value in the array?
I would like to run the function init() again once its completed because more DOM elements myElement get ajaxed in once they have been clicked on.
I have tried running the init function after the setTimeout but that doesnt work and tried checking for last element on the array with btn.length -1 still doesnt work.
function doSetTimeout(index, btn) {
setTimeout(function() {
jQuery(btn[index]).click();
}, index * 1500);
//init();
}
function init() {
var btn = [].slice.call(document.querySelectorAll('.myElement'));
var index;
for (index = 0; index < btn.length; index++) {
doSetTimeout(index, btn)
}
}
init();

Does this work?
function init() {
var btn = [].slice.call(document.querySelectorAll('.myElement'));
var index = 0;
function click() {
setTimeout(function() {
if(index < btn.length) {
jQuery(btn[index++]).click();
click();
} else {
init();
}
}, 1500);
}
click();
}

If you want to write a "dumb" check based on a timer then use the following idiom:
doWhateverYouHaveToDo();
function doWhateverYouHaveToDo() {
// ...
setTimeout(doWhateverYouHaveToDo, 1500);
}
This will run doWhateverYouHaveToDo approximately every 1.5 seconds, waiting for each invocation to complete before proceeding.

clearInterval doesnt stop loop

I have the following code
startProgressTimer: function () {
var me = this,
updateProgressBars = function (eventItems) {
alert("updateProgressBars: looping");
alert("me.eventProgressTimerId:" + me.eventProgressTimerId);
var i = 0;
if (eventItems.length === 0) {
alert("internal Stop Begin")
clearInterval(me.eventProgressTimerId);
alert("internal Stop End")
eventItems = [];
}
for (i = 0; i < eventItems.length; i++) {
if (eventItems[i]._eventId) {
eventItems[i].updateProgressBar();
}
}
};
alert("Start Progress Timer");
this.eventProgressTimerId = setInterval(function () {
updateProgressBars([]);
}, 10000);
}
When the function is called I would expect it to run and bottom out only it keeps on looping.
screen output
ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End
ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End
Any ideas

I suspect the problem might be that the code you don't show calls the startProgressTimer() method more than once for the same instance of whatever object it belongs to, and then within the method you store the interval id in an instance property this.eventProgressTimerId - so multiple calls overwrite the property and you'd only be able to cancel the last one.
If that's the case, a simple fix is to declare your eventProgressTimerId as a local variable within startProgressTimer().

Incremental counter Javascript/JQuery

I'm trying to work out how to make this counter work. After a certain amount of animations have played, I want to make the page refresh. I know my code sucks. I'm not educated in this and I'm very new, not to mention it being difficult to concentrate (to say the least) where I'm staying at the moment... so be nice. Here it is:
$(document).ready(function () {
function loop() {
var p = 0;
if (p = 3) {
location.reload(true);
} else {
$("#p3").delay("1000").fadeIn("slow");
$("#p3").delay("1000").fadeOut("slow", loop);
p + 1;
};
loop();
});

Your if (p = 3) statement is using the assignment operator = instead of the comparison operator === or ==. So p gets assigned to 3, the result of which is truthy, so the else statement is never executed.
Also your p variable is declared inside your loop() function, so it gets reset every time the function is called - you could move that declaration to just before the function (keep it inside the document ready handler: no need to make it global).
Also the line p + 1; doesn't do anything: it doesn't increment p because you'd need to assign the result back to p with p = p + 1, the shorthand for which is p += 1 or just p++.
Finally, your code as posted has a syntax error: you are missing the closing } from the loop() function. I would guess the intention is to end the function and then call it, so:
$(document).ready(function () {
var p = 0; // <--- moved outside function
function loop() {
if (p === 3) { // <-- changed = to ===
location.reload(true);
} else {
$("#p3").delay("1000").fadeIn("slow");
$("#p3").delay("1000").fadeOut("slow", loop);
p++; // <-- changed from p + 1
};
} // <--- this is the missing bracket
loop();
});

I've made some assumptions and written what I believe is what you want, code is un-tested.:
Change it to:
$(document).ready(function () {
var globalP = 0;
//this is called when fadeOut completes.
function fadeComplete() {
if (globalP == 3) {//if it is 3 reload..
location.reload(true);
} else {
globalP++;//increment counter
animate();//start animation again...
}
}
function animate() {
//start fading in...
$("#p3").delay("1000").fadeIn("slow", function() {
//start fading out when the fadeIn completes.
//should this happen? Since you're fading in the SAME element.
$("#p3").delay("1000").fadeOut("slow", fadeComplete);
});
};
animate();
});

Stopping function on event in javascript

i'd like to include three image galleries on one page. one is running two are paused.
On event should the running gallery stop and the clicked one be running.
How do I bring the "return (function().." be stopped?
cheers
mate
var delay = 2500;
var start_frame = 0;
var container = "willkommen";
function fokus(container) {0.5
new Effect.Appear('willkommen', { duration:, to: 0.3 });
new Effect.Appear('eintreten', { duration:0.5, to: 0.3 });
new Effect.Appear('reservieren', { duration:0.5, to: 0.3 });
new Effect.Appear( container, { duration:1, to: 1 });
var lis = $(container).getElementsByTagName('li');
for( i=0; i < lis.length; i++){
if(i!=0){
lis[i].style.display = 'none';
}
}
end_frame = lis.length -1;
setTimeout(fadeInOut(container, start_frame, start_frame,end_frame, delay, lis), delay);
}
function fadeInOut(container, frame, start_frame, end_frame, delay, lis) {
return (function() {
lis = $(container).getElementsByTagName('li');
Effect.Fade(lis[frame]);
if (frame == end_frame) { frame = start_frame; } else { frame++; }
lisAppear = lis[frame];
setTimeout("Effect.Appear(lisAppear);", { duration:0.5, from:0.5, to:1 } );
setTimeout(fadeInOut(container, frame, start_frame, end_frame, delay), delay + 3500);
})
}

You need to store the timeout id returned from setTimeout and pass it into the clearTimeout function.
I'm not sure exacly how you're invoking the fokus function, but if you want it to encapsulate logic in multiple places on one page you should use it as a constructor function.
function Fokus (container) {
...
this.timeout_id = setTimeout(fadeInOut(container, start_frame, start_frame,end_frame, delay, lis), delay);
this.cancel = function () {
clearTimeout(this.timeout_id);
}
}
var gallery = new fokus("willkommen");
gallery.cancel();
There's not a whole lot of context given with your code, but it looks like you're using global variables for everything; I urge you to look into anonymous, self-executing closures to prevent global namespace pollution.