I worked on building this template using the javascript and I can't seem to get the video I have on the screen to activate an event once the video finishes. The page content is pulled in via JSON file. The "videoDemo1" is set to autoplay, so I hope I'm not call the eventListener before the video exist in the HTML document. If there's any questions, just ask, thanks. Here's my code:
function buildVideoContent(pageData) {
// build the layout
let layout = buildColumns(pageData.layout);
// get page container from DOM
let page = document.getElementById('page_frame');
// clear the page frame
page.innerHTML = "";
// main video container
let mainVidCont = document.createElement('div');
mainVidCont.id = "main-cont";
mainVidCont.classList.add('bg-height');
page.appendChild(mainVidCont);
// add video wrapper and video content (start video and end video)
let vidWrapper = document.createElement('div');
vidWrapper.id = "vDemoWrapper";
vidWrapper.classList.add('vid-wrapper-bg');
vidWrapper.innerHTML = "<video id='videoDemo1' controls autoplay muted loop class='video-bg'><source src='assets/media/0010.mp4' type='video/mp4'>Your browser does not support the video tag.</video><video id='videoDemo2' controls loop class='video-bg btn-hide'><source src='assets/media/0010.mp4' type='video/mp4'>Your browser does not support the video tag.</video>";
mainVidCont.appendChild(vidWrapper);
// create the containers for content and buttons
for(let i = 1; i <= 10; i++){
let innerContent = document.createElement('div');
innerContent.id = "aniContentInfo" + i + "";
innerContent.classList.add('inner-cont');
//innerContent.classList.add('animation-fadein');
innerContent.classList.add('col-4');
innerContent.classList.add('float-left');
mainVidCont.appendChild(innerContent);
}
let sumDiv1 = document.getElementById('aniContentInfo1');
let sumDiv2 = document.getElementById('aniContentInfo2');
let sumDiv3 = document.getElementById('aniContentInfo3');
let sumDiv4 = document.getElementById('aniContentInfo4');
let sumDiv5 = document.getElementById('aniContentInfo5');
let sumDiv6 = document.getElementById('aniContentInfo6');
let sumDiv7 = document.getElementById('aniContentInfo7');
let sumDiv8 = document.getElementById('aniContentInfo8');
let sumDiv9 = document.getElementById('aniContentInfo9');
let sumDiv10 = document.getElementById('aniContentInfo10');
let viewerText1 = buildContentCard(pageData.content1.text_elements, false);
let viewerText2 = buildContentCard(pageData.content2.text_elements, false);
let viewerText3 = buildContentCard(pageData.content3.text_elements, false);
let viewerText4 = buildContentCard(pageData.content4.text_elements, false);
let viewerText5 = buildContentCard(pageData.content5.text_elements, false);
let viewerText6 = buildContentCard(pageData.content6.text_elements, false);
let viewerText7 = buildContentCard(pageData.content7.text_elements, false);
let viewerText8 = buildContentCard(pageData.content8.text_elements, false);
let viewerText9 = buildContentCard(pageData.content9.text_elements, false);
let viewerText10 = buildContentCard(pageData.content10.text_elements, false);
sumDiv1.appendChild(viewerText1);
sumDiv2.appendChild(viewerText2);
sumDiv3.appendChild(viewerText3);
sumDiv4.appendChild(viewerText4);
sumDiv5.appendChild(viewerText5);
sumDiv6.appendChild(viewerText6);
sumDiv7.appendChild(viewerText7);
sumDiv8.appendChild(viewerText8);
sumDiv9.appendChild(viewerText9);
sumDiv10.appendChild(viewerText10);
// create buttons and add them to content container
for(let v = 1; v <= 10; v++){
let continueBtn = document.createElement('BUTTON');
continueBtn.id = "continue-btn" + v + "";
continueBtn.classList.add('btn-primary');
continueBtn.classList.add('btn');
continueBtn.innerHTML = "CONTINUE";
let paraCont = document.getElementById("aniContentInfo" + v + "");
paraCont.appendChild(continueBtn);
for(let c = 1; c <= 9; c++){
let count = document.getElementById("aniContentInfo" + c + "");
count.classList.add('btn-hide');
}
if(v = 10){
document.getElementById("aniContentInfo10").classList.add('animation-fadein');
}
};
// THE CODE COMMENTED OUT BELOW ARE ADDITIONAL EVENTLISTENERS THAT I'VE TRIED
/* document.addEventListener('DOMContentLoaded', () => {
var vid = document.getElementById("videoDemo1");
vid.onended = function() {
document.getElementById("aniContentInfo10").classList.add('animation-fadein');
};
if ( video.readyState === 4 ) {
let vid = document.getElementById('videoDemo1');
vid.addEventListener("ended", function(e){
if(state === 0){
let videoElement = document.getElementById('videoDemo1');
videoElement.classList.add('vid-opacity');
}
});
}
}); */
// BELOW IS WHERE I WROTE THE ADDEVENTLISTENER
document.getElementById('videoDemo1').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
document.getElementById("aniContentInfo10").classList.add('animation-fadein');
};
// APPARENTLY THIS DOESN'T WORK WHEN I RUN THE CODE
// create click events for each button to proceed to next content container
for(let h = 1; h <= 10; h++){
continueBtn = document.getElementById('continue-btn' + h + '');
document.getElementById('continue-btn' + h + '').addEventListener("click", function userProgression(e){
let subOne = h - 1;
let videoElement = document.getElementById('videoDemo1');
videoElement.classList.remove('vid-opacity');
videoElement.classList.add('vid-visible');
let videoElement2 = document.getElementById('videoDemo2');
videoElement2.classList.remove('btn-hide');
videoElement2.classList.add('btn-show');
// remove button and content from screen to reveal new content container
setTimeout(function(){
let hMinus = h - 1;
let contentInnerNum = document.getElementById('aniContentInfo' + h + '');
contentInnerNum.classList.remove('btn-hide');
contentInnerNum.classList.remove('animation-fadein');
contentInnerNum.classList.add('animation-fadeout');
if(hMinus !== 0){
let contentNumMinus = document.getElementById('aniContentInfo' + hMinus + '');
contentNumMinus.classList.remove('btn-hide');
contentNumMinus.classList.add('animation-fadein');
contentNumMinus.classList.remove('animation-fadeout');
}
let contentBtn = document.getElementById('continue-btn' + h + '');
contentBtn.classList.add('animation-fadeout');
let contentInner = document.getElementById('continue-btn' + subOne + '');
contentInner.classList.remove('btn-hide');
contentInner.classList.remove('btn-show');
contentInner.classList.add('btn-center');
}, 3000);
// add classes to content elements from the above lines to to remove them completely
setTimeout(function(){
let topBtn = document.getElementById('continue-btn' + h + '');
topBtn.classList.add('btn-hide');
let contentInner = document.getElementById('aniContentInfo' + h + '');
contentInner.classList.add('btn-hide');
}, 6000);
// set timer to make next second video visible.
setTimeout(function(){
let hMinus = h - 1;
if(hMinus !== 0){
let videoElement1a = document.getElementById('videoDemo1');
videoElement1a.classList.remove('vid-opacity');
videoElement1a.classList.add('vid-visible');
}
let videoElement2 = document.getElementById('videoDemo2');
videoElement2.classList.remove('btn-show');
videoElement2.classList.add('btn-hide');
}, 8000);
// important! bring back original first video at the exact second the second video ends
setTimeout(function(){
let videoElement1b = document.getElementById('videoDemo1');
videoElement1b.classList.remove('vid-visible');
videoElement1b.classList.add('vid-opacity');
}, 60000);
});
}
// I ALSO TRIED PLACING THE EVENTLISTENER HERE, BUT NO LUCK
/* document.addEventListener("DOMContentLoaded", function(event) {
let vid1 = document.getElementById("videoDemo1");
if ( vid1.readyState === 4 ) {
vid1.onended = () => {
vid1.classList.add('vid-opacity');
};
}
});*/
}
If it's something I'm missing, any help would be appreciated, thanks
I am writing this post to get help on passing between players using JQuery. I am currently designing a dominos game with four players. My current version works until the end but it gets extremely laggy by the last four pieces. I have determined that this is due to the recursion in the playTurn function. I have tried to use events but that has not worked well for me. My question is if you know how to create a better game loop using JQuery. I would like to finish the basics for this game using JQuery but any suggestions on a better path would be much appreciated. The code is below.
P.S. The game is nowhere near complete but I would very much like to get this problem fixed before proceeding. I am also a beginner to javascript. Thank you for your assistance.
Edit: After some tinkering and help from a stackover flow user, I realized that my addDominoToBoard function in my playTurn function was the main culprit of the lag. Any suggestions on how to better redraw my board. Thank you once again.
var makeBoard = function(){
var totalkeys = [
[0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],
[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],
[2,2],[2,3],[2,4],[2,5],[2,6],
[3,3],[3,4],[3,5],[3,6],
[4,4],[4,5],[4,6],
[5,5],[5,6],
[6,6]
];
return totalkeys;
}
var randomInt = function(min,max)
{
return Math.floor(Math.random()*(max-min)+min);
}
var makeHand = function(board){
var hand = [];
for(x = 0;x<7;x++){
var ranInt = randomInt(0,board.length);
var key = board[ranInt];
hand.push(key);
board.splice(ranInt,1);
}
return hand;
}
var hideItems = function(){
if($("#player1").hasClass('first')){
$("#player2").hide();
$("#player3").hide();
$("#player4").hide();
}else if ($("#player2").hasClass('first')){
$("#player1").hide();
$("#player3").hide();
$("#player4").hide();
}else if($("#player3").hasClass('first')){
$("#player2").hide();
$("#player1").hide();
$("#player4").hide();
}else{
$("#player2").hide();
$("#player3").hide();
$("#player1").hide();
};
}
var loadGame = function(){
var board = makeBoard();
var player1Hand = makeHand(board);
var player2Hand = makeHand(board);
var player3Hand = makeHand(board);
var player4Hand = makeHand(board);
createHands(player1Hand,player2Hand,player3Hand,player4Hand);
hideItems()
}
var createHands = function(player1Hand,player2Hand,player3Hand,player4Hand){
for(x = 0; x < player1Hand.length;x++){
var domino = player1Hand[x].toString();
if(domino == "6,6"){
$("#player1").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player1 #hand').append('<img class = "domino" id ='+domino+src);
};
for(x = 0; x < player2Hand.length;x++){
var domino = player2Hand[x].toString();
if(domino == "6,6"){
$("#player2").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player2 #hand').append('<img class = "domino" id ='+domino+src);
};
for(x = 0; x < player3Hand.length;x++){
var domino = player3Hand[x].toString();
if(domino == "6,6"){
$("#player3").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player3 #hand').append('<img id ='+domino+src);
};
for(x = 0; x < player4Hand.length;x++){
var domino = player4Hand[x].toString();
if(domino == "6,6"){
$("#player4").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player4 #hand').append('<img id ='+domino+src);
};
}
var choseFirstPlayer = function(){
//console.log("I def shouldnt be here");
if($("#player1").hasClass('first')){
return "player1";
}else if ($("#player2").hasClass('first')){
return "player2";
}else if($("#player3").hasClass('first')){
return "player3";
}else{
return "player4";
};
}
var playTurn = function(player){
player = choseNextPlayer(player);
$('#'+player+" #hand img").click(function(){
var dominoSrc = $(this).attr('src');
var dominoNumber = $(this).attr('id');
addDominoToBoard(dominoSrc,dominoNumber);
$(this).remove();
//console.log("This is the player after calling choseNextPlayer. This should be the same as the next player:"+player);
playTurn(player);
});
}
var choseNextPlayer = function(player){
//console.log("This is the player at the beginning of choseNextPlayer:"+player);
if(player == "player1"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player2");
$("#player1").hide();
$("#player2").show();
return "player2";
}else if(player == "player2"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player3");
$("#player2").hide();
$("#player3").show();
return "player3";
}else if(player == "player3"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player4");
$("#player3").hide();
$("#player4").show();
return "player4";
}else{
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player1");
$("#player4").hide();
$("#player1").show();
return "player1";
};
}
var checkGame = function(){
return true;
}
var addDominoToBoard = function(dominoSrc,dominoNumber){
$("#board #notPlaced").append("<img id =" + dominoNumber + " src ="+dominoSrc+">");
drawDominoOnBoard(dominoNumber);
}
var drawDominoOnBoard = function(initalXposition,initalYposition,dominoNumber){
var initalXposition = ($(window).width()/2) + "px";
var initalYposition = ($(window).height()/2 -100) + "px";
var domino = $("#board #notPlaced img");
domino.css({"position": "absolute", "top": initalYposition, "left": initalXposition});
var domino2 = domino.clone();
$("#board #placed").append(domino2);
domino.remove();
}
$(document).ready(function(){
var windowWidth = $(window).width() - $(window).width()/10;
var windowHeight = $(window).height() - $(window).height()/6;
var gameOn = true;
$("#board img").css({"width":windowWidth.toString(),"height":windowHeight.toString()}).hide();
$("#pressed").hide();
$("#notPressed").hover(
function(){
$(this).hide();
$("#pressed").show();
});
$("#pressed").click(function(){
$(this).fadeOut("slow",function(){
$("#board img").show("slow",function(){
loadGame();
//console.log("Here again");
var player = choseFirstPlayer();
$('#'+player+" #hand img").click(function(){
//console.log("I should not be here");
var dominoSrc = $(this).attr('src');
var dominoNumber = $(this).attr('id');
addDominoToBoard(dominoSrc,dominoNumber);
$(this).remove();
playTurn(player);
});
});
});
});
});
First, I want to thank KKetch for making me realize that I was doing a bunch of unnecessary DOM manipulations. After doing more research on jQuery, I realized that it is much better to declare variables instead of constantly getting HTML elements. However, that did not solve my lag problem. I solved my lag problem by eliminating the recursion and using events handlers. My solution was to rely on hiding and showing the hands on the screen. My game loop is self implied by the user being on the web page itself. The solution is below for anyone interested and if you want to keep track of this project, here is the link to the github page. Thanks once again.
Link:
https://github.com/aneurycasado/Dominos-Para-Los-Dominicanos
Solution:
domino00 = new Image();
domino00.src = "images/Dominos/[0,0].png"
domino01 = new Image();
domino01.src = "images/Dominos/[0,1].png"
domino02 = new Image();
domino02.src = "images/Dominos/[0,2].png"
domino03 = new Image();
domino03.src = "images/Dominos/[0,3].png"
domino04 = new Image();
domino04.src = "images/Dominos/[0,4].png"
domino05 = new Image();
domino05.src = "images/Dominos/[0,5].png"
domino06 = new Image();
domino06.src = "images/Dominos/[0,6].png"
domino11 = new Image();
domino11.src = "images/Dominos/[1,1].png"
domino12 = new Image();
domino12.src = "images/Dominos/[1,2].png"
domino13 = new Image();
domino13.src = "images/Dominos/[1,3].png"
domino14 = new Image();
domino14.src = "images/Dominos/[1,4].png"
domino15 = new Image();
domino15.src = "images/Dominos/[1,5].png"
domino16 = new Image();
domino16.src = "images/Dominos/[1,6].png"
domino22 = new Image();
domino22.src = "images/Dominos/[2,2].png"
domino23 = new Image();
domino23.src = "images/Dominos/[2,3].png"
domino24 = new Image();
domino24.src = "images/Dominos/[2,4].png"
domino25 = new Image();
domino25.src = "images/Dominos/[2,5].png"
domino26 = new Image();
domino26.src = "images/Dominos/[2,6].png"
domino33 = new Image();
domino33.src = "images/Dominos/[3,3].png"
domino34 = new Image();
domino34.src = "images/Dominos/[3,4].png"
domino35 = new Image();
domino35.src = "images/Dominos/[3,5].png"
domino36 = new Image();
domino36.src = "images/Dominos/[3,6].png"
domino44 = new Image();
domino44.src = "images/Dominos/[4,4].png"
domino45 = new Image();
domino45.src = "images/Dominos/[4,5].png"
domino46 = new Image();
domino46.src = "images/Dominos/[4,6].png"
domino55 = new Image();
domino55.src = "images/Dominos/[5,5].png"
domino56 = new Image();
domino56.src = "images/Dominos/[5,6].png"
domino66 = new Image();
domino66.src = "images/Dominos/[6,6].png"
dominoImages = [ domino00,domino01,domino02,domino03,domino04,domino05,domino06,
domino11,domino12,domino13,domino14,domino15,domino16,
domino22,domino23,domino24,domino25,domino26,
domino33,domino34,domino35,domino36,
domino44,domino45,domino46,
domino55,domino56,
domino66
]
var drawDominoOnBoard = function(initalXposition,initalYposition,dominoNumber){
var initalXposition = ($(window).width()/2) + "px";
var initalYposition = ($(window).height()/2 -100) + "px";
var domino = $("#board #notPlaced img");
domino.css({"position": "absolute", "top": initalYposition, "left": initalXposition});
var domino2 = domino.clone();
$("#board #placed").append(domino2);
domino.remove();
}
var playTurn = function(player, player1, player2,
player3, player4, dominosPlaced){
player = choseNextPlayer(player,player1,player2,player3,player4);
$('#'+player+" #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
$(this).unbind("click");
playTurn(player,player1,player2,player3,player4,dominosPlaced);
});
}
var choseNextPlayer = function(player,player1,player2,player3,player4){
//console.log("This is the player at the beginning of choseNextPlayer:"+player);
if(player == "player1"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player2");
player1.hide();
player2.show();
return "player2";
}else if(player == "player2"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player3");
player2.hide();
player3.show();
return "player3";
}else if(player == "player3"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player4");
player3.hide();
player4.show();
return "player4";
}else{
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player1");
player4.hide();
player1.show();
return "player1";
};
}
var addDominoToBoard = function(domino,dominoPlaced){
var dominoClone = domino.clone();
dominoPlaced.append(dominoClone);
drawDominoOnBoard(dominoPlaced);
}
var choseFirstPlayer = function(player1,player2,player3,player4){
//console.log("I def shouldnt be here");
if(player1.find("#hand").hasClass('first')){
player1.show();
return "player1";
}else if (player2.find("#hand").hasClass('first')){
player2.show();
return "player2";
}else if(player3.find("#hand").hasClass('first')){
player3.show();
return "player3";
}else{
player4.show();
return "player4";
};
}
var hideHands = function(player1,player2,player3,player4){
player1.hide();
player2.hide();
player3.hide();
player4.hide();
}
var randomInt = function(number){
return Math.floor(Math.random()*number);
}
var makeHand = function(player){
var hand = [];
var player = $(player);
var src = domino66.src
for(x = 0;x<7;x++){
var ranInt = randomInt(dominoImages.length);
var domino = dominoImages[ranInt];
if(domino.src == src){
player.addClass("first");
}
player.append(domino);
dominoImages.splice(ranInt,1);
}
return hand;
}
var hideHands = function(player1,player2,player3,player4){
player1.hide();
player2.hide();
player3.hide();
player4.hide();
}
var loadGame = function(){
makeHand("#player1 #hand");
makeHand("#player2 #hand");
makeHand("#player3 #hand");
makeHand("#player4 #hand");
}
$(document).ready(function(){
loadGame();
var windowWidth = $(window).width() - $(window).width()/10;
var windowHeight = $(window).height() - $(window).height()/6;
var gameOn = true;
var boardImg = $("#board img");
var dominosPlaced = $("#board #placed");
var pressed = $("#pressed");
var notPressed = $("#notPressed");
var player1 = $("#player1");
var player2 = $("#player2");
var player3 = $("#player3");
var player4 = $("#player4");
hideHands(player1,player2,player3,player4);
var player = ""
boardImg.css({"width":windowWidth.toString(),"height":windowHeight.toString()}).hide();
pressed.hide();
notPressed.hover(function(){
$(this).hide();
pressed.show();
});
pressed.click(function(){
$(this).fadeOut("slow",function(){
boardImg.show("slow",function(){
player = choseFirstPlayer(player1,player2,player3,player4);
});
});
});
$("#player1 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
$("#player2 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
$("#player3 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
$("#player4 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
});
I have a forum site installed where I added a auto-resize mod which resizes all the images when the page is loaded
<script>
window.onload = resizeimg;
function resizeimg()
{
if (document.getElementsByTagName)
{
for (i=0; i<document.getElementsByTagName('img').length; i++)
{
var check = 0;
var str = 'http://sariylakirmizi.net/forum/styles/milky_way_red/imageset/sitelogo_small.png';
im = document.getElementsByTagName('img')[i];
var n =str.match(/sitelogo/gi);
if(n == null)
check = 1;
if (im.width > 600 && im.src !=str )
{
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title=im.src;
im.alt=check;
}
}
}
}
</script>
Now what I am trying to is exclude my header logo, so that it would not be resized for that I introduced the string comparison and hardcoded my logo URL, I do not understand why that check fails and my logo still got resized; I also tried several other things like introducing a check variable whether the match function is working but obviously it does noet work, could you please help me with that?
window.onload = resizeimg;
function resizeimg() {
if (document.getElementsByTagName) {
var imgs = document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
var im = imgs[i];
if (im.width > 600 && !im.src.match(/sitelogo/)) {
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
im.style.cursor = (document.all) ? 'hand' : 'pointer';
im.title = im.src;
}
}
}
}
I have a script running on my page to change the images. I want to repeat it 6 times to use in other places on the same page, but it wont work when I repeat it.
var delay = 2000 //set delay in miliseconds
var curindex = 0
var randomimages = new Array()
randomimages[0] = "hhh200.jpg"
randomimages[1] = "ray200.jpg"
var preload = new Array()
for (n = 0; n < randomimages.length; n++) {
preload[n] = new Image()
preload[n].src = randomimages[n]
}
document.write('<img name="defaultimage" src="' + randomimages[Math.floor(Math.random() * (randomimages.length))] + '">')
function rotateimage() {
if (curindex == (tempindex = Math.floor(Math.random() * (randomimages.length)))) {
curindex = curindex == 0 ? 1 : curindex - 1
} else curindex = tempindex
document.images.defaultimage.src = randomimages[curindex]
}
setInterval("rotateimage()", delay)
Can anyone see why it's not working?
If you are just copying and pasting it somewhere else in the page as is, then you are overriding your variable values, and you are giving both images the same name, so those are 2 problems right there. You should put it all inside on function and call that function in the 2 places you want.
Try this.
function randomImage(randomImages, imageName) {
var delay = 2000 //set delay in miliseconds
var curindex = 0
var preload = new Array()
for (n = 0; n < randomImages.length; n++) {
preload[n] = new Image()
preload[n].src = randomImages[n]
}
document.write('<img name="' + imageName + '" src="' + randomImages[Math.floor(Math.random() * (randomImages.length))] + '">');
function rotateimage() {
var tempindex = Math.floor(Math.random() * (randomImages.length));
if (curindex == tempindex) {
curindex = curindex == 0 ? 1 : curindex - 1
} else curindex = tempindex
document.images[imageName].src = randomImages[curindex];
}
setInterval("rotateimage()", delay);
}
// and then to use it, create your image arrays outside of the function, and call the function.
var images1 = new Array();
images1[0] = "hhh200.jpg";
images1[1] = "ray200.jpg";
var images2 = new Array();
images2[0] = "hhh200.jpg";
images2[1] = "ray200.jpg";
randomImage(images1, 'imageOneName');
randomImage(images2, 'imageTwoName');
I have not tested this code, but this is the general idea you should follow.