0

I am having trouble getting this game to work. I want the dropdown menu to offer 20 EPL teams, and then by selecting each individual team, that team's facts will be displayed in a form. For whatever reason, I cannot get this code to work. Any suggestions would be great!

Code:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<!--Created by, 4/24/15--> 
<!--//This is a trivia game created to help with EPL trivia for the current 2014-2015 Season-->

<title>EPL Trivia</title>
<script language="JavaScript">
var state = new Array(20);
var location = new Array(20);
var nickname = new Array(20);
var stadium = new Array(20);
var capacity = new Array(20);

team[0] = "Arsenal FC";
location[0] = "London";
nickname[0] = "The Gunners";
stadium[0] = "Emirates Stadium";
capacity[0] = "60,272";

team[1] = "Aston Villa FC";
location[1] = "Birmingham";
nickname[1] = "The Villans";
stadium[1] = "Villa Park";
capacity[1] = "42,682";

team[2] = "Burnley";
location[2] = "Burnley";
nickname[2] = "The Clarets";
stadium[2] = "Turf Moor";
capacity[2] = "21,401";

team[3] = "Chelsea FC";
location[3] = "London";
nickname[3] = "The Blues";
stadium[3] = "Stamford Bridge";
capacity[3] = "41,798";

team[4] = "Crystal Palace FC";
location[4] = "London";
nickname[4] = "The Eagles";
stadium[4] = "Selhurst Park";
capacity[4] = "25,747";

team[5] = "Everton FC";
location[5] = "Liverpool";
nickname[5] = "The Toffees";
stadium[5] = "Goodison Park";
capacity[5] = "39,571";

team[6] = "Hull City AFC";
location[6] = "Hull";
nickname[6] = "The Tigers";
stadium[6] = "KC Stadium";
capacity[6] = "25,400";

team[7] = "Leicester City FC";
location[7] = "Leicester";
nickname[7] = "The Foxes";
stadium[7] = "King Power Stadium";
capacity[7] = "32,312";

team[8] = "Liverpool FC";
location[8] = "Liverpool";
nickname[8] = "The Reds";
stadium[8] = "Anfield";
capacity[8] = "45,276";

team[9] = "Manchester City FC";
location[9] = "Manchester";
nickname[9] = "City";
stadium[9] = "Etihad Stadium";
capacity[9] = "46,708";

team[10] = "Manchester United FC";
location[10] = "Manchester";
nickname[10] = "The Red Devils";
stadium[10] = "Old Trafford";
capacity[10] = "75,635";

team[11] = "Newcastle United";
location[11] = "Newcastle";
nickname[11] = "The Toon";
stadium[11] = "St. James' Park";
capacity[11] = "52,405";

team[12] = "Queens Park Rangers";
location[12] = "London";
nickname[12] = "The Hoops";
stadium[12] = "Loftus Road";
capacity[12] = "18,000";

team[13] = "Southampton FC";
location[13] = "Southampton";
nickname[13] = "The Saints";
stadium[13] = "St Mary's Stadium";
capacity[13] = "32,505";

team[14] = "Stoke City FC";
location[14] = "Staffordshire";
nickname[14] = "The Potters";
stadium[14] = "Britannia Stadium";
capacity[14] = "27,740";

team[15] = "Sunderland FC";
location[15] = "Sunderland";
nickname[15] = "The Black Cats";
stadium[15] = "Stadium of Light";
capacity[15] = "48,707";

team[16] = "Swansea City AFC";
location[16] = "Swansea";
nickname[16] = "The Swans";
stadium[16] = "Liberty Stadium";
capacity[16] = "20,827";

team[17] = "Tottenham Hotspur FC";
location[17] = "London";
nickname[17] = "Spurs";
stadium[17] = "White Hart Lane";
capacity[17] = "36,284";


team[18] = "West Bromwich Albion FC";
location[18] = "West Bromwich";
nickname[18] = "The Baggies";
stadium[18] = "The Hawthorns";
capacity[18] = "26,445";

team[19] = "West Ham United FC";
location[19] = "London";
nickname[19] = "The Hammers";
stadium[19] = "Boleyn Ground";
capacity[19] = "35,245";


function showInfo() {
var page = document.triviaform;
var choice = page.teamList;
var team = new Array();
for (var i = 0; i < team.length; i++) {
if (choice.options[choice.selectedIndex].value  == team[i]) {
page.location.value = location[i];
page.nickname.value = nickname[i];
page.stadium.value = stadium[i];
page.capacity.value = capacity[i];
break;
}
else {
page.location.value = "";
page.nickname.value = "";
page.stadium.value = "";
page.capacity.value = "";
      }
   }
}

</script>
</head>
<body>
<center>
<form name=triviaform>
<table border=1>
<tr><td align=center>
<p><font size=6><em><strong><u>EPL Trivia</u></strong></em></font><br>
<font size=3><strong>Just select a team below.</strong></font>

<p>Select a team: <select name=teamList size=1 onChange="showInfo()">

<option value="">Select ---->
<option value="Arsenal FC">Arsenal FC
<option value="Aston Villa FC">Aston Villa FC
<option value="Burnley">Burnley
<option value="Chelsea FC">Chelsea FC
<option value="Crystal Palace FC">Crystal Palace FC
<option value="Everton FC">Everton FC
<option value="Hull City AFC">Hull City AFC
<option value="Leicester City FC">Leicester City FC
<option value="Liverpool FC">Liverpool FC
<option value="Manchester City FC">Manchester City FC
<option value="Manchester United FC">Manchester United FC
<option value="Newcastle United">Newcastle United
<option value="Queens Park Rangers">Queens Park Rangers
<option value="Southampton FC">Southampton FC
<option value="Stoke City FC">Stoke City FC
<option value="Sunderland FC">Sunderland FC
<option value="Swansea City AFC">Swansea City AFC
<option value="Tottenham Hotspur FC">Tottenham Hotspur FC
<option value="West Bromwich Albion FC">West Bromwich Albion FC
<option value="West Ham united FC">West Ham United FC
</select>

<p>Location: <input type=text size=25 name=location>
<p>Nickname: <input type=text size=20 name=nickname>
<p>Stadium Name: <input type=text size=20 name=stadium>
<p>Stadium Capacity: <input type=text size=23 name=capacity>

</td></tr>
</table>
</form>
</center>

</BODY>
</HTML>

Thanks Again!

Justin Head
  • 1
  • 2
  • http://stackoverflow.com/questions/647282/is-there-an-onselect-event-or-equivalent-for-html-select – RobertoNovelo Apr 16 '15 at 22:01
  • Start by changing your `<=` operator to the `<` operator in your for loop. And are you missing a `break` in your `else` statement? – Mex Apr 16 '15 at 22:02
  • 2
    `var team = new Array();` Than it should work. Start to use a debugging tool. You would see the error in the console immediately. – mrak Apr 16 '15 at 22:07
  • Attempted to substitute the var = team new Array(); to no avail? – Justin Head Apr 16 '15 at 22:17

2 Answers2

1

Try this. There were a few errors, easy to spot in the console. The variable team seemed to be missing and I changed the variable location to place as it a reserved word in HTML (see here: http://www.w3schools.com/js/js_reserved.asp). Hope that helps. I only tested in Safari, but you should definitely test in other browsers.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<!--Created by Justin Head, 4/24/15--> 
<!--//This is a trivia game created to help with EPL trivia for the     current 2014-2015 Season-->

<title>EPL Trivia</title>
<script type="text/javascript">
var team = new Array(20);
var state = new Array(20);
var place = new Array(20);
var nickname = new Array(20);
var stadium = new Array(20);
var capacity = new Array(20);

team[0] = "Arsenal FC";
place[0] = "London";
nickname[0] = "The Gunners";
stadium[0] = "Emirates Stadium";
capacity[0] = "60,272";

team[1] = "Aston Villa FC";
place[1] = "Birmingham";
nickname[1] = "The Villans";
stadium[1] = "Villa Park";
capacity[1] = "42,682";

team[2] = "Burnley";
place[2] = "Burnley";
nickname[2] = "The Clarets";
stadium[2] = "Turf Moor";
capacity[2] = "21,401";

team[3] = "Chelsea FC";
place[3] = "London";
nickname[3] = "The Blues";
stadium[3] = "Stamford Bridge";
capacity[3] = "41,798";

team[4] = "Crystal Palace FC";
place[4] = "London";
nickname[4] = "The Eagles";
stadium[4] = "Selhurst Park";
capacity[4] = "25,747";

team[5] = "Everton FC";
place[5] = "Liverpool";
nickname[5] = "The Toffees";
stadium[5] = "Goodison Park";
capacity[5] = "39,571";

team[6] = "Hull City AFC";
place[6] = "Hull";
nickname[6] = "The Tigers";
stadium[6] = "KC Stadium";
capacity[6] = "25,400";

team[7] = "Leicester City FC";
place[7] = "Leicester";
nickname[7] = "The Foxes";
stadium[7] = "King Power Stadium";
capacity[7] = "32,312";

team[8] = "Liverpool FC";
place[8] = "Liverpool";
nickname[8] = "The Reds";
stadium[8] = "Anfield";
capacity[8] = "45,276";

team[9] = "Manchester City FC";
place[9] = "Manchester";
nickname[9] = "City";
stadium[9] = "Etihad Stadium";
capacity[9] = "46,708";

team[10] = "Manchester United FC";
place[10] = "Manchester";
nickname[10] = "The Red Devils";
stadium[10] = "Old Trafford";
capacity[10] = "75,635";

team[11] = "Newcastle United";
place[11] = "Newcastle";
nickname[11] = "The Toon";
stadium[11] = "St. James' Park";
capacity[11] = "52,405";

team[12] = "Queens Park Rangers";
place[12] = "London";
nickname[12] = "The Hoops";
stadium[12] = "Loftus Road";
capacity[12] = "18,000";

team[13] = "Southampton FC";
place[13] = "Southampton";
nickname[13] = "The Saints";
stadium[13] = "St Mary's Stadium";
capacity[13] = "32,505";

team[14] = "Stoke City FC";
place[14] = "Staffordshire";
nickname[14] = "The Potters";
stadium[14] = "Britannia Stadium";
capacity[14] = "27,740";

team[15] = "Sunderland FC";
place[15] = "Sunderland";
nickname[15] = "The Black Cats";
stadium[15] = "Stadium of Light";
capacity[15] = "48,707";

team[16] = "Swansea City AFC";
place[16] = "Swansea";
nickname[16] = "The Swans";
stadium[16] = "Liberty Stadium";
capacity[16] = "20,827";

team[17] = "Tottenham Hotspur FC";
place[17] = "London";
nickname[17] = "Spurs";
stadium[17] = "White Hart Lane";
capacity[17] = "36,284";


team[18] = "West Bromwich Albion FC";
place[18] = "West Bromwich";
nickname[18] = "The Baggies";
stadium[18] = "The Hawthorns";
capacity[18] = "26,445";

team[19] = "West Ham United FC";
place[19] = "London";
nickname[19] = "The Hammers";
stadium[19] = "Boleyn Ground";
capacity[19] = "35,245";


function showInfo() {
var page = document.triviaform;
var choice = page.teamList;

for (var i = 0; i <= team.length; i++) {
if (choice.options[choice.selectedIndex].value  == team[i]) {
page.place.value = place[i];
page.nickname.value = nickname[i];
page.stadium.value = stadium[i];
page.capacity.value = capacity[i];
break;
}
else {

page.place.value = "";
page.nickname.value = "";
page.stadium.value = "";
page.capacity.value = "";

      }
   }
}

</script>
</head>
<body>
<center>
<form name=triviaform>
<table border=1>
<tr><td align=center>
<p><font size=6><em><strong><u>EPL Trivia</u></strong></em></font><br>
<font size=3><strong>Just select a team below.</strong></font>

<p>Select a team: <select name=teamList size=1 onchange="javascript:showInfo()">

<option value="">Select ---->
<option value="Arsenal FC">Arsenal FC
<option value="Aston Villa FC">Aston Villa FC
<option value="Burnley">Burnley
<option value="Chelsea FC">Chelsea FC
<option value="Crystal Palace FC">Crystal Palace FC
<option value="Everton FC">Everton FC
<option value="Hull City AFC">Hull City AFC
<option value="Leicester City FC">Leicester City FC
<option value="Liverpool FC">Liverpool FC
<option value="Manchester City FC">Manchester City FC
<option value="Manchester United FC">Manchester United FC
<option value="Newcastle United">Newcastle United
<option value="Queens Park Rangers">Queens Park Rangers
<option value="Southampton FC">Southampton FC
<option value="Stoke City FC">Stoke City FC
<option value="Sunderland FC">Sunderland FC
<option value="Swansea City AFC">Swansea City AFC
<option value="Tottenham Hotspur FC">Tottenham Hotspur FC
<option value="West Bromwich Albion FC">West Bromwich Albion FC
<option value="West Ham united FC">West Ham United FC
</select>

<p>place: <input type=text size=25 name=place>
<p>Nickname: <input type=text size=20 name=nickname>
<p>Stadium Name: <input type=text size=20 name=stadium>
<p>Stadium Capacity: <input type=text size=23 name=capacity>

</td></tr>
</table>
</form>
</center>

</BODY>
</HTML>
pingin
  • 482
  • 1
  • 6
  • 19
  • You're welcome — and that's a cool little script you've written ;-) – pingin Apr 16 '15 at 22:28
  • If I wanted to add a team crest for each team as well, do I just include another var (var crest = new Array (20) , include it in the form with input type=image, and include in the page.crest.values? then attached a separate folder with jpgs? – Justin Head Apr 16 '15 at 22:37
  • Upload all your images to a folder e.g. "images." Create a new array called something like imagePaths. and populate it with the strings that point to the image on the server e.g. ["images/chelsea.gif"…]. Then in the HTML add the image placeholder where you like say as a

    Update the src attribute in your javascript with Document.getElementById("crest").setAttribute("src", imagePaths[3]). That's the gist of it anyway. You could do it other ways of course.

     – pingin Apr 17 '15 at 18:39
0

There are two mistakes that are combining to cause you problems. The first is that you are using the variable location and setting it to an array. This is a variable used by window and resetting it will cause the browser to redirect to another page. This can be fixed by renaming your location variable to something else (e.g. eplLocation)

The second problem is you declare a state variable, but then attempt to assign values to team. Initializing state as team should resolve this.

user2085955
  • 104
  • 8