Ориентация на свойство объекта, которое изменяется

Question

Я создаю опрос по столицам штата и проверяю выбранный ответ на вопрос с правильным ответом, который хранится в объекте. Мне тяжело нацеливаться на свойство «капитал» в объекте, потому что вопрос викторины каждый раз разный. Я мог бы сделать States.texas.capital, но это было бы предназначено только для столицы Техаса. Мне нужно что-то похожее на состояния. [Текущее состояние в викторине] .Capital. Я думаю, что мне может понадобиться переменная для добавления, но я не уверен, как бы я ее создал. Проблема в нижней части сценария в условии оператора if. Спасибо за любую помощь.

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

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

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

    arizona: {
        image: 'state-images/arizona.jpg',
        capital: 'Phoenix',
        options: ['Tuscon', 'Scottsdale', 'Yuma', 'Phoenix']
    }
    }
    
    var currentState = states[Math.floor(Math.random() * states.length)];

function getState() {

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

}

getState();

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;
}
    
    
    function answerCheck(clicked_id) {

    var clickedAnswer = document.getElementById(clicked_id).innerHTML;

    if (clickedAnswer == cities.currentState.capital) {
        document.getElementById(clicked_id).style.background = "green"; 
    } else {
        document.getElementById(clicked_id).style.background = "red"; 
    }

Answer 1

В строке вы случайным образом выбираете город

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

, вам нужно убедиться, что выбранный вами объект из массива cities также верен. Я предлагаю каждый раз помещать ваше случайное число в переменную, а затем выбирать правильные значения из ваших массивов (это во многом зависит от того же порядка, поэтому я бы предпочел реорганизовать этот код.

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

Последние строки кода должен выглядеть следующим образом:

if (clickedAnswer == currentCity.capital) {
        document.getElementById(clicked_id).style.background = "green"; 
    } else {
        document.getElementById(clicked_id).style.background = "red"; 
    }

Это было бы решением с минимальными изменениями в вашем коде. Но есть много повторений и несовместимости. Рефакторинг.

Answer 2

if (clickedAnswer == cities.currentState.capital) {

должно быть

if (clickedAnswer == cities[currentState].capital) {

, но ваша собственность в нижнем регистре и currentState пишется с большой буквы, поэтому вместо этого должно быть

if (clickedAnswer == cities[currentState.toLowerCase()].capital) {

, поскольку currentState свойство в объекте cities, но вместо этого вам нужно имя свойства, которое равно значению currentState.

Хорошо, поскольку у вас много дублированного кода, я подумал, что вы поможете, поэтому я взял ваше код и рефакторинг это так, я также добавил несколько стилей.

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

cities = {
  alabama: {
    image: 'state-images/alabama.jpg',
    capital: 'Montgomery',
    options: ['Tuscaloosa', 'Montgomery', 'Birmingham', 'Huntsville']
  },
  alaska: {
    image: 'state-images/alaska.jpg',
    capital: 'Juneau',
    options: ['Anchorage', 'Fairbanks', 'Juneau', 'Nome']
  },
  arizona: {
    image: 'state-images/arizona.jpg',
    capital: 'Phoenix',
    options: ['Tuscon', 'Scottsdale', 'Yuma', 'Phoenix']
  }
}
    
currentState = states[Math.floor(Math.random() * states.length)];

function getState() {
  document.getElementById('activeState').innerHTML = currentState;
  document.querySelector(".options").innerHTML = `
    ${cities[currentState.toLowerCase()].options.map(function(opt) {
      return `<button class="choice">${opt}</button>`
    }).join("")}
  `;
}

getState();
    
document.querySelector(".options").onclick = function(e) {
  if(e.target.className !== "choice") {
    return;
  }
  if(e.target.textContent === cities[currentState.toLowerCase()].capital) {
    e.target.style.background = "green"; 
  }else {
    e.target.style.background = "red";
  }
};

.choice {
  display: block;
  width: 280px;
  height: 40px;
  cursor: pointer;
  border-radius: 10px;
}
.container {
  width: 300px;
  background-color: lightgreen;
  color: white;
  font: bold 15px monospace;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px #ccc;
}

<div class="container">
  <div class="question">
    <p>What is the Capital of <span id='activeState'></span>?</p>
  </div>
  <div class="state-image">
    <img id='stateImage' src="State-images/alabama.jpg" alt="">
  </div>
  <div class="options"></div>
</div>

И теперь вы можете разрабатывать поверх моего кода, если хотите, счастливого кодирования!