...

View Full Version : Manipulating Arrays.... HELP !!



nthrawl
03-16-2010, 09:54 PM
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.
http://i3.photobucket.com/albums/y60/smokinmonkey/first.jpg


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.
http://i3.photobucket.com/albums/y60/smokinmonkey/second.jpg


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?
http://i3.photobucket.com/albums/y60/smokinmonkey/third.jpg

Javascript code, just skip through the 3 arrays at the top... the problem function is at the bottom.


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.



<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>

Old Pedant
03-16-2010, 10:10 PM
YOu *will* kick yourself over this one!


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:


str = "";
for (var j=0; j<arrayLength; j++)
{
str += customerList[j] + "<br/>";
}

But there is a BY FAR easier way:


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.

Philip M
03-16-2010, 10:16 PM
It seems to be working for me. I used the following "test script":


<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 - )

Philip M
03-16-2010, 10:18 PM
*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?

Old Pedant
03-16-2010, 10:49 PM
DOH. Surely I mean semi-colons, indeed. My fingers just typed without my brain being engaged. Not unusual when you start to go senile.

nthrawl
03-17-2010, 12:34 AM
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:


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

Old Pedant
03-17-2010, 02:48 AM
Your FOR loop is utterly a waste of code.

YOU DO NOT NEED OR WANT a loop.


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum