我正在尝试创建州立资本问答游戏,并使用switch语句基于从数组中随机选择的变量插入选项和图像。所有状态都以阵列形式保存,然后将城市和图像保存在一个对象中。第一个状态(阿拉巴马州)可以加载,但是当变量为任何其他状态时,我将得到“无法读取属性'0'的未定义状态”。我虽然正确设置了switch语句,所以在这里有些卡住了。我将不胜感激任何帮助。谢谢。
<script>
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
var cities = {
alabama: {
image: 'state-images/alabama.jpg',
options: ['Tuscaloosa', 'Montgomery', 'Birmingham', 'Huntsville']
},
alaska: {
image: 'state-images/alaska.jpg',
cities: ['Anchorage', 'Fairbanks', 'Juneau', 'Nome']
},
arizona: {
image: 'state-images/arizona.jpg',
cities: ['Tuscon', 'Scottsdale', 'Yuma', 'Phoenix']
},
arkansas: {
image: 'state-images/arkansas.jpg',
cities: ['Hot Springs', 'Pine Bluff', 'Little Rock', 'Fayetteville']
},
california: {
image: 'state-images/california.jpg',
cities: ['Los Angeles', 'San Diego', 'Stockton', 'Sacramento']
},
colorado: {
image: 'state-images/colorado.jpg',
cities: ['Denver', 'Fort Collins', 'Colorado Springs', 'Pueblo']
},
connecticut: {
image: 'state-images/connecticut.jpg',
cities: ['New Haven', 'Hartford', 'Stamford', 'Bridgeport']
},
delaware: {
image: 'state-images/delaware.jpg',
cities: ['Georgetown', 'Milford', 'Dover', 'Harrington']
},
florida: {
image: 'state-images/florida.jpg',
cities: ['Miami', 'Tallahassee', 'Jacksonville', 'St. Petersburg']
},
georgia: {
image: 'state-images/georgia.jpg',
cities: ['Atlanta', 'Macon', 'Albany', 'Augusta']
},
hawaii: {
image: 'state-images/hawaii.jpg',
cities: ['Hilo', 'Pearl City', 'Honolulu', 'Kailua']
},
idaho: {
image: 'state-images/idaho.jpg',
cities: ['Boise', 'Idaho Falls', 'Twin Falls', 'Pocatello']
},
illinois: {
image: 'state-images/illinois.jpg',
cities: ['Chicago', 'Peoria', 'Decatur', 'Springfield']
},
indiana: {
image: 'state-images/indiana.jpg',
cities: ['Bloomington', 'Fort Wayne', 'Indianapolis', 'South Bend']
},
iowa: {
image: 'state-images/iowa.jpg',
cities: ['Cedar Rapids', 'Des Moines', 'Council Bluffs', 'Waterloo']
},
kansas: {
image: 'state-images/kansas.jpg',
cities: ['Topeka', 'Kansas City', 'Wichita', 'Manhattan']
},
kentucky: {
image: 'state-images/kentucky.jpg',
cities: ['Frankfort', 'Lexington', 'Louisville', 'Bowling Green']
},
louisiana: {
image: 'state-images/louisiana.jpg',
cities: ['New Orleans', 'Lafayette', 'Baton Rouge', 'Shreveport']
},
maine: {
image: 'state-images/maine.jpg',
cities: ['Portland', 'Augusta', 'Millinocket', 'Portsmouth']
},
maryland: {
image: 'state-images/maryland.jpg',
cities: ['Baltimore', 'Annapolis', 'Salisbury', 'Hagerstown']
},
massachusetts: {
image: 'state-images/massachusetts.jpg',
cities: ['Providence', 'Lowell', 'Worcester', 'Boston']
},
michigan: {
image: 'state-images/michigan.jpg',
cities: ['Detriot', 'Grand Rapids', 'Lansing', 'Saginaw']
},
minnesota: {
image: 'state-images/minnesota.jpg',
cities: ['Minneapolis', 'St. Paul', 'Duluth', 'Moorhead']
},
mississippi: {
image: 'state-images/mississippi.jpg',
cities: ['Jackson', 'Tupelo', 'Hattiesburg', 'Columbus']
},
missouri: {
image: 'state-images/missouri.jpg',
cities: ['St. Louis', 'Jefferson City', 'Springfield', 'Independence']
},
montana: {
image: 'state-images/montana.jpg',
cities: ['Helena', 'Bozeman', 'Missoula', 'Billings']
},
nebraska: {
image: 'state-images/nebraska.jpg',
cities: ['Omaha', 'Bellevue', 'North Platte', 'Lincoln']
},
nevada: {
image: 'state-images/nevada.jpg',
cities: ['Reno', 'Carson City', 'Las Vegas', 'Henderson']
},
newHampshire: {
image: 'state-images/new-hampshire.jpg',
cities: ['Concord', 'Manchester', 'Haverhill', 'Littleton']
},
newJersey: {
image: 'state-images/new-jersey.jpg',
cities: ['Trenton', 'Elizabeth', 'Middleton', 'Atlantic City']
},
newMexico: {
image: 'state-images/new-mexico.jpg',
cities: ['Roswell', 'Santa Fe', 'Albuquerque', 'Carlsbad']
},
newYork: {
image: 'state-images/new-york.jpg',
cities: ['New York City', 'Syracuse', 'Albany', 'Rochester']
},
northCarolina: {
image: 'state-images/north-carolina',
cities: ['Charlotte', 'Raleigh', 'Fayetteville', 'Greensboro']
},
northDakota: {
image: 'state-images/north-dakota',
cities: ['Bismark', 'Fargo', 'Minot', 'Williston']
},
ohio: {
image: 'state-images/ohio.jpg',
cities: ['Cincinnati', 'Dayton', 'Cleveland', 'Columbus']
},
oklahoma: {
image: 'state-images/oklahoma.jpg',
cities: ['Tulsa', 'Oklahoma City', 'Norman', 'Broken Arrow']
},
oregon: {
image: 'state-images/oregon.jpg',
cities: ['Portland', 'Eugene', 'Medford', 'Salem']
},
pennsylvania: {
image: 'state-images/pennsylvania.jpg',
cities: ['Pittsburgh', 'Philadelphia', 'Harrisburg', 'Scranton']
},
rhodeIsland: {
image: 'state-images/rhode-Island',
cities: ['Providence', 'Warwick', 'Kingston', 'Woonsocket']
},
southCarolina: {
image: 'state-images/south-carolina.jpg',
cities: ['Spartanburg', 'Greenville', 'Columbia', 'Charleston']
},
southDakota: {
image: 'state-images/south-dakota.jpg',
cities: ['Rapid City', 'Sioux Falls', 'Sturgis', 'Pierre']
},
tennessee: {
image: 'state-images/tennessee',
cities: ['Nashville', 'Memphis', 'Knoxville', 'Chattanooga']
},
texas: {
image: 'state-images/texas.jpg',
cities: ['Houston', 'Dallas', 'San Antonio', 'Austin']
},
utah: {
image: 'state-images/utah.jpg',
cities: ['Salt Lake City', 'Provo', 'Ogden', 'St. George']
},
vermont: {
image: 'state-images/vermont.jpg',
cities: ['Burlington', 'Montpelier', 'Rutland', 'Newport']
},
virginia: {
image: 'state-images/virginia.jpg',
cities: ['Lynchburg', 'Roanoke', 'Richmond', 'Norfolk']
},
washington: {
image: 'state-images/washington.jpg',
cities: ['Seattle', 'Tacoma', 'Spokane', 'Olympia']
},
westVirginia: {
image: 'state-images/west-virginia',
cities: ['Parkersburg', 'Morgantown', 'Charleston', 'Bluefield']
},
wisconsin: {
image: 'state-images/wisconsin.jpg',
cities: ['Milwaukee', 'Madison', 'Green Bay', 'Superior']
},
wyoming: {
image: 'state-images/wyoming.jpg',
cities: ['Cheyenne', 'Casper', 'Gillette', 'Jackson']
}
}
var currentState = states[Math.floor(Math.random() * states.length)];
function getState() {
document.getElementById('activeState').innerHTML = currentState;
}
getState();
console.log(currentState);
switch(currentState) {
case 'Alabama':
document.getElementById('choice1').innerHTML = cities.alabama.options[0];
document.getElementById('choice2').innerHTML = cities.alabama.options[1];
document.getElementById('choice3').innerHTML = cities.alabama.options[2];
document.getElementById('choice4').innerHTML = cities.alabama.options[3];
document.getElementById('stateImage').src='state-images/alabama.jpg';
break;
case 'Alaska':
document.getElementById('choice1').innerHTML = cities.alaska.options[0];
document.getElementById('choice2').innerHTML = cities.alaska.options[1];
document.getElementById('choice3').innerHTML = cities.alaska.options[2];
document.getElementById('choice4').innerHTML = cities.alaska.options[3];
document.getElementById('stateImage').src='state-images/alaska.jpg';
break;
case 'Arizona':
document.getElementById('choice1').innerHTML = cities.arizona.options[0];
document.getElementById('choice2').innerHTML = cities.arizona.options[1];
document.getElementById('choice3').innerHTML = cities.arizona.options[2];
document.getElementById('choice4').innerHTML = cities.arizona.options[3];
document.getElementById('stateImage').src='state-images/arizona.jpg';
break;
case 'Arkansas':
document.getElementById('choice1').innerHTML = cities.arkansas.options[0];
document.getElementById('choice2').innerHTML = cities.arkansas.options[1];
document.getElementById('choice3').innerHTML = cities.arkansas.options[2];
document.getElementById('choice4').innerHTML = cities.arkansas.options[3];
document.getElementById('stateImage').src='state-images/arkansas.jpg';
break;
case 'California':
document.getElementById('choice1').innerHTML = cities.california.options[0];
document.getElementById('choice2').innerHTML = cities.california.options[1];
document.getElementById('choice3').innerHTML = cities.california.options[2];
document.getElementById('choice4').innerHTML = cities.california.options[3];
document.getElementById('stateImage').src='state-images/california.jpg';
break;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/index.css">
<title>State Capital Quiz</title>
</head>
<body>
<div class="container">
<div class="question">
<p>What is the Capital of</p>
<p id='activeState'></p>
</div>
<div class="state-image">
<img id='stateImage' src="State-images/alabama.jpg" alt="">
</div>
<div class="options">
<ul>
<li>
<button id="choice1"></button>
</li>
<li>
<button id="choice2"></button>
</li>
<li>
<button id="choice3"></button>
</li>
<li>
<button id="choice4"></button>
</li>
</ul>
</div>
</div>
[对于阿拉巴马州,您的对象中存在options
键,而对于其余状态,您具有cities
键,这就是为什么当您尝试在交换状态下访问除阿拉巴马州以外的任何状态时的options
,[C0 options