Using multi scripts [Archive]

tanderson001

07-27-2010, 08:52 AM

Hi there, I have a couple of scripts which both do exactly what I want, but when I try use them both at the same time only one of them will work, could you tell me if i need to change anything in them to get them both to work at the same time or if im missing something really simple?

Thanks

Script 1
<script type="text/javascript">

var imgPaths = ['pic1.jpg',
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg'];

//preload the images
var imgObjs = new Array;
for(var i=0; i < imgPaths.length; i=i+1) {
imgObjs[i] = new Image();
imgObjs[i].src = imgPaths[i];
}

function togglePic(num) {
if(currPic == 0 || currPic != num) {
document.getElementById("image").src = imgObjs[num].src;
currPic = num;
} else {
document.getElementById("image").src = imgObjs[0].src;
currPic = 0;
}
}

//load the default image
window.onload=function() {
document.getElementById("image").src = imgObjs[0].src;
currPic = 0; //flag storing current pic number
}

</script>

Script 2
<script type="text/javascript">
window.onload=function () { setStyles(); };
function setStyles() {
ids = new Array ('style1','style2','style3','style4');
for (i=0;i<ids.length;i++) {
document.getElementById(ids[i]).className='';
document.getElementById(ids[i]).onclick=function() { return Cngclass(this); }
}
}
function Cngclass(obj){
var currObj;
for (i=0;i<ids.length;i++) {
currObj = document.getElementById(ids[i]);
if (obj.id == currObj.id) {
currObj.className=(currObj.className=='')?'selected':'';
}
else { currObj.className=''; }
}
return false;
}

</script>

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id="style">
<div id="styleimage">
<img src="" id="image" width="610" height="229" />
</div>
<div id="stylenav">
<ul>
<li id="style1"><a href="#" onclick="togglePic(1); return false">style 1</a></li>
<li id="style2"><a href="#" onclick="togglePic(2); return false">style 2</a></li>
<li id="style3"><a href="#" onclick="togglePic(3); return false">style 3</a></li>
<li id="style4"><a href="#" onclick="togglePic(4); return false">style 4</a></li>
</ul>
</div>
</div>
</body>
</html>

Philip M

07-27-2010, 08:56 AM

You have two window.onload functions. This topic has been covered vey many times in this forum.
For more info see:-

http://www.javascriptkit.com/javatutors/multiplejava.shtml
http://www.dyn-web.com/tutorials/combine.php
Or you can simply fire a set of functions when the page loads.
<script type="text/javascript">
window.onload = function() {
functionOne();
functionTwo();
}
</script>

Simplest is
//load the default image
window.onload=function() {
document.getElementById("image").src = imgObjs[0].src;
currPic = 0; //flag storing current pic number
setStyles();
}

"Most of the time I don't have much fun. The rest of the time I don't have any fun at all." - Woody Allen - US movie actor, comedian, & director (1935 - )