Simplest BACKGROUND SCREEN ON-CLICK PICTURE CHANGE malfunction

Question

Hey I have found and then slightly adapted the best simple script for ONCLICK BACKGROUND IMAGE change. It works like a dream - highly recommended, but for a reason I cannot solve the background picture rotation stops.

It works fine for 2 pictures, but when I added the second 'function updateIndex' to add more pictures all it shows onclick is the following JPEG sequence: 100 - 101 - 102 - 100.. so once it goes back to the first picture the ONCLICK doesn't work anymore.

I would like to be able to ad as many pictures as I want to the picture rotation line up.

Any help would much appreciated.

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>INDEX</title>
<style type="text/css">
   html, body, #body {
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
-webkit-background-size: cover no-repeat left top fixed;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 0px;
margin-left: 0px;
 }

 #body.imageOne {
background-image: url("100.jpg");
}
#body.imageTwo {
background-image: url("101.jpg");
}
#body.imageThree {
background-image: url("102.jpg");
}
#body.imageFour {
background-image: url("103.jpg");
}
#body.imageFive {
background-image: url("104.jpg");
}
#body.imageSix {
background-image: url("105.jpg");
}


</style>
</head>

<body>

<div id="body" class="imageOne">
</div>




<script type="text/javascript">//<![CDATA[ 

var bodyObj, className, index;
bodyObj = document.getElementById('body');



index = 1;
className = [
'imageOne',
'imageTwo',
'imageThree',
'imageFour',
'imageFive',
'imageSix'
];



function updateIndex(){
if(index === 0){
    index = 1;
}else{
    index = 0;
}

}

function updateIndex(){
if(index === 1){
    index = 2;
}else{
    index = 0;
}
}



// JPEG picture rotation: 100 - 101 - 102 - (then back to) 100 (perfect) but then stops at 100 and SCREEN ONCLICK doesnt work anymore! help.


bodyObj.onclick = function(e){
e.currentTarget.className = className[index];
updateIndex();
}

//]]>  

</script>

</body>

</html>

Answer 1

Change your updateIndex() function as follows:

function updateIndex() {
    index = (index + 1) % className.length;
}

Simplest BACKGROUND SCREEN ON-CLICK PICTURE CHANGE malfunction

Question

1 answers

solution1
0 2015-06-13 11:08:05

Simplest BACKGROUND SCREEN ON-CLICK PICTURE CHANGE malfunction

Question

1 answers

solution1 0 2015-06-13 11:08:05

solution1
0 2015-06-13 11:08:05