javascript - HTML/Javascript EPL 问答游戏的问题

标签 javascript html

我在运行此游戏时遇到问题。我希望下拉菜单提供 20 个 EPL 球队,然后通过选择每个单独的球队,该球队的事实将以表格形式显示。无论出于何种原因,我无法让这段代码工作。任何建议都会很棒!

代码:

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

再次感谢!

最佳答案

试试这个。有一些错误,很容易在控制台中发现。变量 team 似乎丢失了,我将变量位置更改为 HTML 中的保留字(参见此处: http://www.w3schools.com/js/js_reserved.asp )。希望有帮助。我只在 Safari 中进行了测试,但您绝对应该在其他浏览器中进行测试。

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

关于javascript - HTML/Javascript EPL 问答游戏的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29686697/

相关文章:

javascript - 显示/隐藏不带动画的 Bootstrap Collapse 元素

javascript - Jquery 多选事件处理程序

javascript - 使用 Javascript Regex 转义 Lucene 字符

css - 单个 IMG 在 DIV 中多次居中,在外部 DIV 中右对齐

javascript - 如何从输入类型=数字中获取值?

javascript - 使用 javascript 无需手动编辑代码即可更新公告板

javascript - 倒数计时器在 vue js 中不起作用弹出

JavaScript 图像弹出窗口

javascript - 在 EaselJS 中将矢量绘制到位图

html - 如何重新创建 "image on the left, text on the right"和 "text on the right image on the left"模式?