Jump to content
Sign in to follow this  
sugafree

Error with Random image slideshow

Recommended Posts

Hi,

 

I need to use getElementById to reference to a div which contains a pic and without changing anything in the body tag, a random image slideshow should appear on load! instead of that pic.

 

I have tried different ways to sort it out, but it was never perfect...

 

Got 3 problems, first function changeDiv it says getElementsByTagname(...)[] is not defined...

second is in the function rotateimage

 

else

 

document.images.splash undefined...

 

third newimages function overwrites the whole page and it should only change the div

 

 

anyone could help me out on this one??

 

Thanks

1.html

Edited by sugafree

Share this post


Link to post
Share on other sites

I don't see where you're calling the changediv function, that error would be caused if you're running that function before the page loads because it doesn't have any content yet. The error about document.images.splash being undefined should be self-explanatory - there is no document.images.splash. The div with that ID is not an image, it's not going to be in the images collection.

newimages function overwrites the whole page and it should only change the div

That's because you're using document.write, that's what it does. If you're trying to change the contents of the div then use innerHTML, not document.write. But the line in changediv isn't correct. This line:
document.getElementById("splash").innerHTMl=document.getElementsByTagName("img")[0].src=newimages;
Is setting both the innerHTML of the div, and the src of the image, to a function. That's not going to work. You can call that function, in which case the function needs to return the content that you want, but it's also a problem to set the src and innerHTML to the same thing. The src should be a URL only. The innerHTML should be HTML markup.
  • Like 1

Share this post


Link to post
Share on other sites

I have just recently started javascript and still could not get it work. changediv function was just a mistake, it meant to be getDiv function.

 

I have change a few things but ran into problems again.

 

function getDiv ()
{
document.getElementTagName("img")[0].innerHTMl=newimages(); // for this line it says its not a function
}
var newimages= function (){
randomimages[Math.floor(Math.random()*(randomimages.length))] // also i am gessing this is not the proper way to display the images but i havent got a clue
};
for document.images.splash should i put the images in a document instead of var randomimages? or what should i put there? Also i was thinking of changing the whole function rotateimage but any other i have found did not have a delay in it.

Share this post


Link to post
Share on other sites

It would probably help if you would stop trying to accomplish six things in each line of code because you just create a mess. I'm not even sure I understand how many images you want to display at one time. Try...

<!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>Egestas</title><meta name="keywords" content="" /><meta name="description" content="" /><link href="file1fortask2.css" rel="stylesheet" type="text/css" media="screen" /><script type="text/javascript">window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script type="text/javascript">var delay = 3000; //set delay in millisecondsvar curindex;var randomimages = [];randomimages[0]="images/img01.png";randomimages[1]="images/img02.png";randomimages[2]="images/img03.png";randomimages[3]="images/img04.png";randomimages[4]="images/img05.png";randomimages[5]="images/img06.png";var preload = [];for (var n=0 ; n<randomimages.length ; n++){preload[n] = new Image();preload[n].src = randomimages[n];}window.onload = function(){var splash = document.getElementById('splash');curindex = Math.floor(Math.random()*(randomimages.length));splash.innerHTML = '<img id="rimg" src="'+ randomimages[curindex] +'" alt="random images"/>';setInterval(rotateimage,delay); }function rotateimage(){  var tempindex;  do{    tempindex = Math.floor(Math.random()*(randomimages.length));  }while(curindex==tempindex);  curindex = tempindex;  document.getElementById('rimg').src = randomimages[curindex];}function getDiv(){// whatever}</script></head><body><div id="header">	<div id="splash"></div><input type="button" value="click" onclick="getDiv()" />	</div></body></html>
  • Like 1

Share this post


Link to post
Share on other sites

function getDiv (){document.getElementTagName("img")[0].innerHTMl=newimages(); // for this line it says its not a function}var newimages= function (){randomimages[Math.floor(Math.random()*(randomimages.length))] // also i am gessing this is not the proper way to display the images but i havent got a clue};

The error about not being a function might be because of how you declared it, with var. Just declare the function normally, like you did with getDiv. The newimages function also needs to return a value, you use the return keyword for that.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/returnhttp://www.w3schools.com/js/js_functions.asp
  • Like 1

Share this post


Link to post
Share on other sites

First of all guys, I would like to thank you for being patient with me:) I am getting there but I only started javascript and it is not easy. The code Davej gave me is pretty close to what I need and also I will look up the links in the last comment because I want to learn JS.

 

Only problem with that link is that it does not show the random images. Sometimes it shows the alt text which is random images, sometimes a pic etc.. Anyway in a few hours I will look into it and try to sort it out myself before asking for more help. Btw after this is done, I still have more stuff to sort out like cookies and puzzle etc, so I wouldnt want to use all my "freebies" on this...justs kidding.

 

Thanks for your help again guys

Share this post


Link to post
Share on other sites

Depends which one:) I did "study" it for a while. I dont understand the for loop and why we have the preload or what is it doing, if the rotateimage function is to return the random number. Also within the rotateimage function the do while loop is not what I would say I completely understand, but I know if the random number is the same as the one which is currently displayed, then it will run it again until ...right? Its hard to put it all together, but the more I see, the more I learn. I am trying

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...