Problems with HTML/Javascript EPL trivia game
Question
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!
2 answers
solution1
1 2015-04-16 22:15:32
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>
solution2
0 2015-04-16 22:23:00
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 (eg 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Trying to show score on simple HTML and JavaScript Trivia game
Improving javascript function in Trivia Game
Restarting trivia game w javascript/jquery
Serve text instead of images - Trivia javascript game
Random questions order when game starts - Trivia javascript game
How to process the answer on this trivia game I'm making? (Javascript)
Scope of undefined in 2nd round of a Javascript & JQuery Trivia game
Trivia Game not scoring correctly
Trivia game using jquery
Problems in Making RPS Game Using HTML, CSS, Javascript
Related Tags