sugafree Posted March 26, 2014 Share Posted March 26, 2014 (edited) 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 March 26, 2014 by sugafree Link to comment Share on other sites More sharing options...
justsomeguy Posted March 26, 2014 Share Posted March 26, 2014 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 divThat'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. 1 Link to comment Share on other sites More sharing options...
sugafree Posted March 26, 2014 Author Share Posted March 26, 2014 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. Link to comment Share on other sites More sharing options...
davej Posted March 26, 2014 Share Posted March 26, 2014 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> 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted March 26, 2014 Share Posted March 26, 2014 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 1 Link to comment Share on other sites More sharing options...
sugafree Posted March 27, 2014 Author Share Posted March 27, 2014 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 Link to comment Share on other sites More sharing options...
sugafree Posted March 27, 2014 Author Share Posted March 27, 2014 Oh my days...Davej it is working.... just had to rename the pics. THank YOU!! Sorted Link to comment Share on other sites More sharing options...
justsomeguy Posted March 27, 2014 Share Posted March 27, 2014 Do you understand what that code is doing? Link to comment Share on other sites More sharing options...
sugafree Posted March 27, 2014 Author Share Posted March 27, 2014 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now