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>