Switch 语句不切换

Question

我正在尝试创建一个州首府问答游戏，并使用 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>

Answer 1

对于阿拉巴马州，您的对象中存在 options 键，而对于其他州，您有 cities 键，这就是为什么当您尝试在除阿拉巴马州以外的任何州的 switch case 中访问 options 时，@ 987654324@ 来了 undefined

Answer 2

Lakshya 是正确的，您需要为每个对象设置相同的属性。 此外，我建议将每个状态的对象标识符转换为字符串，这样您就可以引用该状态，而无需为每个状态编写案例。

  var states = ['Alabama', 'Alaska', 'Arizona'];

  var cities = {
        'Alabama': {
            image: 'state-images/alabama.jpg',
            options: ['Tuscaloosa', 'Montgomery', 'Birmingham', 'Huntsville']
        },

        'Alaska': {
            image: 'state-images/alaska.jpg',
            options: ['Anchorage', 'Fairbanks', 'Juneau', 'Nome']
        },

        'Arizona': {
            image: 'state-images/arizona.jpg',
            options: ['Tuscon', 'Scottsdale', 'Yuma', 'Phoenix']
        }


    }

        var currentState = states[0];

        function getState() {

        document.getElementById('activeState').innerHTML = currentState;

        }

        getState();

        console.log(currentState);




                document.getElementById('choice1').innerHTML = cities[currentState].options[0];
                document.getElementById('choice2').innerHTML = cities[currentState].options[1];
                document.getElementById('choice3').innerHTML = cities[currentState].options[2];
                document.getElementById('choice4').innerHTML = cities[currentState].options[3];
                document.getElementById('stateImage').src='state-images/' + currentState.toLowerCase() + '.jpg';

Answer 3

我为您做了一些重构，并在您的 switch 和 case 语句中放置了一个默认案例

const 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'];


const 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"],
  },
};

const currentState = states[Math.floor(Math.random() * states.length)];

function getState() {
  document.getElementById("activeState").innerHTML = currentState;
}

getState();

const setInnerHtml = city => {
  document.getElementById("choice1").innerHTML = cities[city].options[0];
  document.getElementById("choice2").innerHTML = cities[city].options[1];
  document.getElementById("choice3").innerHTML = cities[bity].options[2];
  document.getElementById("choice4").innerHTML = cities[city].options[3];
  document.getElementById("stateImage").src = "state-images/alabama.jpg";
};

const setImage = city => { 
  document.getElementById("stateImage").src = `state-images/${city}.jpg`;
};

switch (currentState) {
  case "Alabama":
    setInnerHtml("alabama")
    setImage("alabama")
    break;

  case "Alaska":
    setInnerHtml("alaska")
    setImage("alaska")
    break;

  case "Arizona":
    setInnerHtml("arizona")
    setImage("arizona")
    break;

  case "Arkansas":
    setInnerHtml("arkansas")
    setImage("arkansas")
    break;

  case "California":
    setInnerHtml("california")
    setImage("california")
    break;
  default:
    console.log(`Current state is: ${currentState} and does not match any case!`);
}