Заявление о переключении не переключается - PullRequest
0 голосов
/ 02 мая 2020

Я пытаюсь создать игру для проверки состояния капитала и использую оператор 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>

Ответы [ 3 ]

0 голосов
/ 02 мая 2020

Лакшья верна, вам нужно, чтобы атрибуты были одинаковыми для каждого объекта. Также я бы предложил превратить ваши идентификаторы объекта для каждого состояния в строки, и таким образом вы сможете ссылаться на состояние без необходимости записывать регистр для каждого состояния.

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

0 голосов
/ 02 мая 2020

Я сделал для вас небольшой рефакторинг и поместил регистр по умолчанию в ваш оператор 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!`);
}


0 голосов
/ 02 мая 2020

Для Алабамы у вас есть ключ options, существующий в вашем объекте, в то время как для остальных состояний у вас есть клавиша cities, и поэтому, когда вы пытаетесь получить доступ к options в случае переключения для любого штата, кроме Алабамы, options идет как undefined

...