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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Manipulating Arrays.... HELP !!

    OK first of all I will post some screenshots of the 'website' I have created so far and explain what is working and what is not working. Then I will post my code and ask for help.

    Below is the main screen before any action happens. The three boxes are DIV elements. The writing and dropdown menu in the first box is generated by Javascript code.



    Whenever a user selects an option from the dropdown menu. Information about the movie and a picture of the cover are displayed. The movie title, picture filename and movie description are all stored in three separate arrays.



    Now for the problem. I have created a fourth array "customerList" and left it empty. Whenever a customer clicks the reserve button it calls a function "myReserve()". This function takes the selection from the dropdown menu, then uses the push function to add the selection to the blank array. I then use the code "arrayLength = customerList.length" to get the length of the customer list. A for loop is used to cycle through the array and display the contents of the array. The problem is it only displays one selection. When reserve is clicked again the newest selection is displayed. Why will it not push the next item into the array?


    Javascript code, just skip through the 3 arrays at the top... the problem function is at the bottom.
    Code:
    var movieTitles = new Array(8)
    movieTitles[0] = "The Prestige [2006]"
    movieTitles[1] = "The Lives of Others [2007]"
    movieTitles[2] = "The Bourne Ultimatum [2007]"
    movieTitles[3] = "Spider-Man 3 [2007]"
    movieTitles[4] = "Casino Royale [2006]"
    movieTitles[5] = "The Illusionist [2006]"
    movieTitles[6] = "Sunshine [2007]"
    movieTitles[7] = "Zodiac [2007]"
    movieTitles[8] = "Quantum of Solace [2008]"
    
    var movieCovers = new Array(8)
    movieCovers[0] = "prestige.jpg"
    movieCovers[1] = "lives_of_others.jpg"
    movieCovers[2] = "bourne3.jpg"
    movieCovers[3] = "spiderman3.jpg"
    movieCovers[4] = "casinoroyal.jpg"
    movieCovers[5] = "illusionist.jpg"
    movieCovers[6] = "sunshine.jpg"
    movieCovers[7] = "zodiac.jpg"
    movieCovers[8] = "quantum_of_solace.jpg"
    
    var movieDescriptions = new Array(8)
    movieDescriptions[0] = "Two Victorian-era magicians develop a rivalry that builds into an escalating battle of tricks."
    movieDescriptions[1] = "Five years before its downfall, the former East-German government ensured its claim to power with a ruthless system of control and surveillance."
    movieDescriptions[2] = "Legendary assassin Jason Bourne uncovers mysteries of his past, which puts him in the cross-hairs of a superkiller."
    movieDescriptions[3] = "When Peter Parker's suit suddenly turns black it brings out the dark, vengeful side of his personality." 
    movieDescriptions[4] = "The story examines James Bond's first mission after getting his licence to kill."
    movieDescriptions[5] = "Eisenheim is a stage magician who amazes the audiences of turn-of-the-century Vienna, drawing the attention of Crown Prince Leopold." 
    movieDescriptions[6] = "Fifty years from now, the sun is dying, and mankind is dying with it. Our last hope: a spaceship carrying a device which will breathe new life into the star."
    movieDescriptions[7] = "A serial killer terrifies the San Francisco Bay Area and taunts police with his ciphers and letters."
    movieDescriptions[8] = "Seeking revenge for the death of his love, secret agent James Bond sets out to stop an environmentalist from taking control of a country's water supply."
    
    var customerList = new Array()
    
    function getMovieTitle()
    {
        
    var str = "<p>Available movies are contained in the list below.<br />Select a movie title to read more details.<br />If you want to add the movie to your list click the reserve option.<br /></p>"
        str = str + "<form action='P4_1.html' method='post'><select onChange = 'displayMovie()' name='title' id = 'droplist'><option>Choose a movie</option>"
        mylength = movieTitles.length
        
        //loop for each movie title in the movieTitles array
        for (var i=0; i<mylength; i++)
        {
            str = str + "<option>" + movieTitles[i] + "</option>"
          
          
        }
        
        str = str+"</select></form>"
       
        
        //place content into dropdown menu
        document.getElementById("dropdown").innerHTML = str
        
    }
    
    
    function displayMovie()
    
    {
      var i
      i = document.getElementById('droplist').selectedIndex - 1
      
      
      var m =  movieTitles[i]
      m = m + "<p><br><img src='"+movieCovers[i]+"'></p>"
      m = m + movieDescriptions[i]
      m = m + "<p> <a href='Javascript:myReserve()'><span id = 'res'> Reserve </span></a></p>"
      document.getElementById("Movie_Info").innerHTML = m    
    }
    
    
    function myReserve()
    {
    
    var i
      i = document.getElementById('droplist').selectedIndex - 1
    
      customerList.push(movieTitles[i])
      
      arrayLength = customerList.length
    
       for (var j=0; j<arrayLength; j++)
    {
     
      str = customerList[j]
    }
    
      document.getElementById("Movie_List").innerHTML = str
    
    }
    HTML code, incase you want to create my files yourself to troubleshoot for me but all the problems occur in the myReserve function just above. Everything else works fine.

    Code:
    <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
    <head>
    <title>P4_1</title>
    
    <script src="P4.js" type="text/javascript"></script>
    
    <link rel="stylesheet" type="text/css" media="screen" href="P4.css" />
    
    <!--[if gte mso 9]><xml>
    <mso:CustomDocumentProperties>
    <mso:ContentType msdt:dt="string">Document</mso:ContentType>
    </mso:CustomDocumentProperties>
    </xml><![endif]-->
    </head>
    
    <body onload="javascript:getMovieTitle()">
    
    
    <img src="logo.jpg">
    
    <div id="dropdown" class="box1">
    </div>
    
    <div id="Movie_Info" class="box2">
    <p>Movie info will go here</p>
    </div>
    
    <div id="Movie_List" class="box3">
    <p>Your movie list will go here</p>
    </div>
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    YOu *will* kick yourself over this one!
    Code:
    for (var j=0; j<arrayLength; j++)
    {
       str = customerList[j]
    }
    Okay, how many customers from the customerList will be added to that str variable???

    HINT: Only the last one.

    Now try:
    Code:
    str = "";
    for (var j=0; j<arrayLength; j++)
    {
       str += customerList[j] + "<br/>";
    }
    But there is a BY FAR easier way:
    Code:
    function myReserve()
    {
       var i;
       i = document.getElementById('droplist').selectedIndex - 1;
       customerList.push(movieTitles[i]);
       document.getElementById("Movie_List").innerHTML = customerList.join("<br/>");
    }
    *DO* learn to use apostrophes (which look like ; and which most people call semicolons...doh on me) in your JS code. They may be optional, but they will occasionally help you catch silly mistakes.
    Last edited by Old Pedant; 03-16-2010 at 10:51 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    It seems to be working for me. I used the following "test script":

    Code:
    <script type = "text/javascript">
    
    var movieTitles = new Array(8)
    movieTitles[0] = "The Prestige [2006]"
    movieTitles[1] = "The Lives of Others [2007]"
    movieTitles[2] = "The Bourne Ultimatum [2007]"
    movieTitles[3] = "Spider-Man 3 [2007]"
    movieTitles[4] = "Casino Royale [2006]"
    movieTitles[5] = "The Illusionist [2006]"
    movieTitles[6] = "Sunshine [2007]"
    movieTitles[7] = "Zodiac [2007]"
    movieTitles[8] = "Quantum of Solace [2008]"
    
    var customerList = new Array();
    
    var i = 3;
    customerList.push(movieTitles[i]);
    i = 5;
    customerList.push(movieTitles[i]);
    
    arrayLength = customerList.length;
    
    alert (customerList);
    alert (arrayLength);
    
    var str = "";
    for (var j=0; j<arrayLength; j++) {
    str = str + customerList[j];
    }
    
    alert (str);
    </script>
    Suggest you use an alert to check the value of i.


    "His lack of education is more than compensated for by his keenly developed moral bankruptcy." - Woody Allen - US movie actor, comedian, & director (1935 - )
    Last edited by Philip M; 03-16-2010 at 10:21 PM. Reason: Missed semi-colon!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Old Pedant View Post
    *DO* learn to use apostrophes in your JS code. They may be optional, but they will occasionally help you catch silly mistakes.
    Surely you mean semi-colons?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    DOH. Surely I mean semi-colons, indeed. My fingers just typed without my brain being engaged. Not unusual when you start to go senile.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks for the replies I ended up getting it working using:

    str = customerList.join("<br />");
    document.getElementById("Movie_List").innerHTML = str


    for some reason "str = str +" never entered my mind


    below is the current code for the end function:
    Code:
    function myReserve()
    {
    
    var i
      i = document.getElementById('droplist').selectedIndex - 1
    
      customerList.push(movieTitles[i])
      
      arrayLength = customerList.length
    
    for (var j=0; j<arrayLength; j++)
    {
    
      str = customerList.join("<br />")
    
    }
    
      document.getElementById("Movie_List").innerHTML = str
    
    }
    I want to stop someone being able to add an item to the array that is already there.. I tried to write an IF statement but it wouldn't work for me. Can someone help me with this also??

    Thanks

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Your FOR loop is utterly a waste of code.

    YOU DO NOT NEED OR WANT a loop.
    Code:
    function myReserve()
    {
        var i = document.getElementById('droplist').selectedIndex - 1;
        customerList.push(movieTitles[i]);
        document.getElementById("Movie_List").innerHTML = customerList.join("<br />");
    }
    DONE. Honest.

    Now...If you want to prevent them from picking the same thing twice, a better way is probably to remove the <option> from the <select> so it's not even there any longer. They *can't* pick it again.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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