Switch语句未切换

问题描述 投票:0回答:1

我正在尝试创建州立资本问答游戏,并使用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>
javascript arrays object switch-statement
1个回答
0
投票

[对于阿拉巴马州,您的对象中存在options键,而对于其余状态,您具有cities键,这就是为什么当您尝试在交换状态下访问除阿拉巴马州以外的任何状态时的options,[C0 options

来了
© www.soinside.com 2019 - 2024. All rights reserved.