asked on

JS: Something wrong with my javascript?

I am trying to enable two js functions on Body onload. I can run either auto1 or auto2, but I cannot get them both to run at the same time.

<body onload="auto1();auto2();">

<SCRIPT LANGUAGE="JavaScript">

//--slideshow2

NewImg2 = new Array (
"images/FAM-1.jpg",
"images/FAM-2.jpg",
"images/FAM-3.jpg",
"images/FAM-4.jpg"
);

var ImgNum2 = 0;
var ImgLength2 = NewImg2.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg2(direction) {
if (document.images) {
ImgNum2 = ImgNum2 + direction;
if (ImgNum2 > ImgLength2) {
ImgNum2 = 0;
}
if (ImgNum2 < 0) {
ImgNum2 = ImgLength2;
}
document.slideshow2.src = NewImg2[ImgNum2];
   }
}
function auto2() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg2(1)", delay);
   }
}

//--slideshow1
 
NewImg1 = new Array (
"images/FUN-1.jpg",
"images/FUN-2.jpg",
"images/FUN-3.jpg",
"images/FUN-4.jpg"
);

var ImgNum1 = 0;
var ImgLength1 = NewImg1.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg1(direction) {
if (document.images) {
ImgNum1 = ImgNum1 + direction;
if (ImgNum1 > ImgLength1) {
ImgNum1 = 0;
}
if (ImgNum1 < 0) {
ImgNum1 = ImgLength1;
}
document.slideshow1.src = NewImg1[ImgNum1];
   }
}
function auto1() {
if (lock == true) {
lock = false;
window.clearInterval(run);

}
else if (lock == false) {
lock = true;
run = setInterval("chgImg1(1)", delay);
   }
}

</script>

</head>

<body onload="auto1();auto2();">

Open in new window

<SCRIPT LANGUAGE="JavaScript">

//--slideshow2

NewImg2 = new Array (
"images/FAM-1.jpg",
"images/FAM-2.jpg",
"images/FAM-3.jpg",
"images/FAM-4.jpg"
);

var ImgNum2 = 0;
var ImgLength2 = NewImg2.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg2(direction) {
if (document.images) {
ImgNum2 = ImgNum2 + direction;
if (ImgNum2 > ImgLength2) {
ImgNum2 = 0;
}
if (ImgNum2 < 0) {
ImgNum2 = ImgLength2;
}
document.slideshow2.src = NewImg2[ImgNum2];
   }
}
function auto2() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg2(1)", delay);
   }
}

//--slideshow1
 
NewImg1 = new Array (
"images/FUN-1.jpg",
"images/FUN-2.jpg",
"images/FUN-3.jpg",
"images/FUN-4.jpg"
);

var ImgNum1 = 0;
var ImgLength1 = NewImg1.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg1(direction) {
if (document.images) {
ImgNum1 = ImgNum1 + direction;
if (ImgNum1 > ImgLength1) {
ImgNum1 = 0;
}
if (ImgNum1 < 0) {
ImgNum1 = ImgLength1;
}
document.slideshow1.src = NewImg1[ImgNum1];
   }
}
function auto1() {
if (lock == true) {
lock = false;
window.clearInterval(run);

}
else if (lock == false) {
lock = true;
run = setInterval("chgImg1(1)", delay);
   }
}

</script>

</head>

<body onload="auto1();auto2();">

Open in new window

ienaxxx

what about having a func. that collect all the func calls you want to fire at load?

otherwise try this:
eliminate the onloqd on the html tag and write this in the header
<script> </script>

ienaxxx

sry, i meant <script>
window.onload=function(){

function1();
function2();
}
</script>

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

westdh

ASKER

neither of these works..
this works only if I use only one of the functions.
either auto1 or auto2
<body onload="setTimeout(function() { auto1();},50);auto2();">

westdh

ASKER

Ok. Made some progress
this does works <body onload="auto1();auto2()">
Problem was within the script.

I alter this code in each auto1 and auto2
see auto1 & auto2.

So now the images change in sync for slideshow1 and slideshow2

so.. How would you change the script so that slideshow1 and slideshow2
change there images at different times. I plan on 4 image arrays
and I would like to display them like rolling images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="layout-basic.css" rel="stylesheet" type="text/css" />

<SCRIPT LANGUAGE="JavaScript">

//--slideshow2

NewImg2 = new Array (
"images/FAM-1.jpg",
"images/FAM-2.jpg",
"images/FAM-3.jpg",
"images/FAM-4.jpg"
);

var ImgNum2 = 0;
var ImgLength2 = NewImg2.length - 1;

//Time delay between Slides in milliseconds
var delay = 2000;

var lock2 = false;
var run;
function chgImg2(direction) {
if (document.images) {
ImgNum2 = ImgNum2 + direction;
if (ImgNum2 > ImgLength2) {
ImgNum2 = 0;
}
if (ImgNum2 < 0) {
ImgNum2 = ImgLength2;
}
document.slideshow2.src = NewImg2[ImgNum2];
   }
}

function auto2() {
if (lock2 == true) {
lock2 = false;
window.clearInterval(run);
}
else if (lock2 == false) {
lock2 = true;
run = setInterval("chgImg2(1)", delay);
   }
}

//--slideshow1
 
NewImg1 = new Array (
"images/FUN-1.jpg",
"images/FUN-2.jpg",
"images/FUN-3.jpg",
"images/FUN-4.jpg"
);

var ImgNum1 = 0;
var ImgLength1 = NewImg1.length - 1;

//Time delay between Slides in milliseconds
var delay = 2000;

var lock1 = false;
var run;
function chgImg1(direction) {
if (document.images) {
ImgNum1 = ImgNum1 + direction;
if (ImgNum1 > ImgLength1) {
ImgNum1 = 0;
}
if (ImgNum1 < 0) {
ImgNum1 = ImgLength1;
}
document.slideshow1.src = NewImg1[ImgNum1];
   }
}
function auto1() {
if (lock1 == true) {
lock1 = false;
window.clearInterval(run);
}
else if (lock1 == false) {
lock1 = true;
run = setInterval("chgImg1(1)", delay);
   }
}

</script>

</head>


<body onload="auto1();auto2()">

Open in new window

westdh

ASKER

Got it thanks

<body onload="setTimeout(function() { auto1();},50);auto2();">