Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Location
    montreal
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Understanding arrays/getElementsByTagName

    This is a question about a code for a javascript slide show which i think is very important to understand because slide shows are heavily used!
    This is the html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" script type="text/javascript" src="slideshow.js"></script>
    <title>Slideshow exercise</title>
    </head>

    <body>
    <h1> Slideshow exercicse</h1>

    <img class="slide" src="cityscape.jpg" width="400" height="300">
    <img class="slide" src="Creative_design_sailing_leaves_under_blue_sky.jpg" width="400" height="300">
    <img class="slide" src="Curiousity.jpg" width="400" height="300">
    <img class="slide" src="raindrops-blue-garden-seamless-tile.jpg" width="400" height="300">
    <p> Clic on image to view next slide</p>
    <p> Clic on image to view next slide</p>


    </body>
    </html>
    This is the .js file and my questions:
    var numslides=0;currentslide=0;
    var slides= new Array();

    function MakeSlideShow(){
    //find all images with the class "slide"
    imgs= document.getElementsByTagName("img");---------> question 1

    for (i=0; i<imgs.length ; i++)
    {
    if(imgs[i].className != "slide") continue;
    slides[numslides]=imgs[i];----------------------------------->question2
    //hide all but first image
    if(numslides==0)
    {imgs[i].style.display="block";}

    else{imgs[i].style.display="none";}
    imgs[i].onclick=NextSlide;
    numslides++;}//end of loop--------------------------->question3
    }

    //end MakeSlideShow()

    function NextSlide(){
    slides[currentslide].style.display="none";------------------>question4
    currentslide++
    if(currentslide >= numslides) currentslide=0;
    slides[currentslide].style.display="block";--------------->question5
    }

    window.onload= MakeSlideShow;
    question1:
    does "imgs" automatically become an array here?
    If so, how can i print out its lenght?
    This is what i tried and it doesn't work->
    var lengthimgs= imgs.length
    document.write(lengthimgs)

    question2:
    What is happening here?
    Is the imgs[i] array transferring its data into the slides[numslides] array?

    question3:
    If slides[numslides] and imgs[i] are interchangeable why can't this line be i++ instead of numslides++

    question4:
    What is happenning to the slides array here?
    Is currentslide becoming a copy of numslides?

    question5:
    What does this do? Where does this line sent the code?
    Why this? Why hasn't "imgs[i].style.display="block";" already done the job for the display?

    Thanks
    Last edited by homeLearning; 06-09-2010 at 05:49 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2010
    Posts
    163
    Thanks
    3
    Thanked 25 Times in 25 Posts
    1. imgs is an array. try switching document.write() to alert() or document.getElementById().innerHTML

    2. the arrays are still imgs and slides, i and numslides are the location in the array. but yes this is copying the data from one array to the other

    3. this depends how the code is used. If you call function MakeSlideShow() multiple times numslides won't reset to 0 but i will. Also the two arrays aren't interchangable. The reason the data is transfered one element at a time is to modify it. It might just be there because it made more sence to the programmer.

    4. each element was an img tag like <img src="www.URL.com" style="css style rules" the style attribute modifies how it appears in the browser. s=slides[currentslide] refers to a speccific image and slides[currentslide].style.display="none"; modifies that one images style attribute to "none"

    5. the function NextSlide is changing what element is visible. your line at question 4 made the current slide visible and this line makes the previous slide invisible.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •