0

I'm trying to set an Object property equal to the value of a clicked list item (0, 1, 2, 3). I am able to console.log the correct value, but the object property is not being set.

Could someone please explain how to set my gameObject property to the correct list item value?

var gameObject = {
  questions: [
    {
      title: "What color is the sky?",
      answers: [
        "blue",
        "green",
        "red",
        "purple"
      ],
      correctAnswer: 0,
      userSelection: ''
    },
    {
      title: "What color is UNC blue?",
      answers: [
        "Duke blue",
        "Sky blue",
        "red",
        "purple"
      ],
      correctAnswer: 1,
      userSelection: ''
    },
    {
      title: "What color is UNC blue?",
      answers: [
        "Duke blue",
        "Sky blue",
        "red",
        "purple"
      ],
      correctAnswer: 1,
      userSelection: ''
    },
  ],
  currentQuestion: 0,
  userCorrect: 0,
  userIncorrect: 0,
  userBlank: 0,
  timer: 30,
  timerRunning: false
};

var triviaAnswerSection = $('#answers');

function renderGameAnswers() {
  var html = '';
  html += `<ul class='question'>`
  html += `<li class='answer' value='0'><a href='#'>${gameObject.questions[gameObject.currentQuestion].answers[0]}</a></li>`
  html += `<li class='answer' value='1'><a href='#'>${gameObject.questions[gameObject.currentQuestion].answers[1]}</a></li>`
  html += `<li class='answer' value='2'><a href='#'>${gameObject.questions[gameObject.currentQuestion].answers[2]}</a></li>`
  html += `<li class='answer' value='3'><a href='#'>${gameObject.questions[gameObject.currentQuestion].answers[3]}</a></li>`
  html += `</ul>`
  triviaAnswerSection.html(html);
  $('.answer').on('click', function() {
    var answer = $(this).attr('value');
    gameObject.questions[gameObject.currentQuestion].userSelection = answer;
  });
}

renderGameAnswers();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id='game'>
  <div id='title'>
  </div>
  <div id='start'>
  </div>
  <div id='stop'>
  </div>
  <div id='timeRemaining'>
  </div>
  <div id='questions'>
  </div>
  <div id='answers'>
  <div id='done'>
  </div>
  <div id='userScore'>
  </div>
</div>
</body>
</html>
madalinivascu
  • 30,904
  • 4
  • 32
  • 50
ppreyer
  • 5,477
  • 4
  • 18
  • 16
  • Where do you set gameObject.currentQuestion? – K K Sep 27 '17 at 04:52
  • I set gameObject.currentQuestion equal to 0 in the actual gameObject. – ppreyer Sep 27 '17 at 13:01
  • @madalin ivascu - thanks for your reference. I followed the post and changed my function accordingly with no luck. Here's what I have now based on that post: $('#answers').on('click', '.answer', function() { var answer = $(this).attr('value'); gameObject.questions[gameObject.currentQuestion].userSelection = answer; }); – ppreyer Sep 27 '17 at 13:03

0 Answers0