Multidimensional array of name value pairs randomly to display questions (javascript/jquery)

Question

I'm new to multidimensional arrays and using objects like this to display data. What I'm trying to achieve is to loop through and randomly display a question within the array and then the user will type the answer "higher, or lower" and match the input value to the answer object.

Currently I'm just displaying "0" as my output. I assume this has to do with the questions.length part as only being one array since the opening bracket consists of objects?

How can I achieve a random question generation?

If I need to further explain please let me know but it should just be a simple ask a question and compare the value of the users input to the answer and display correct or incorrect.

$(function() {

function gameStart(){	
	var questions = [
		{	 
			question1: {
				question: 'Is the price higher or lower than $40.00?', 
				answer: 'higher'
			},
			question2: {
				question: 'Is the price higher or lower than $100.00?', 
				answer: 'higher'
			},
			question3: {
				question: 'Is the price higher or lower than $50.00?', 
				answer: 'lower'
			}
		}
	];

	var i;
	for(i = 0; i < questions.length; i++) {
		document.getElementById("question").innerHTML = Math.floor(Math.random()*questions.length);
	}
}
gameStart();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2 id="question"></h2>
</div>
	<label for="text">Answer:</label>
	<input id="user-answer" type="text" value="">
	<button id="submit" type="submit">Submit</button>

	<p id="sorry" style="display: none">Sorry...</p>
	<p id="correct" style="display: none">You got it!</p>

Answer 1

Here' a working version of your game. Here are some advice:

1. structure of the code:

   1. change your data structure from

      [{ question1: {...}, question2: {...}, question3: {...} }]
      

      to

      [ {...}, {...}, {...} ]
      

      This way it will be easier to access the array and the keys are not redundant.

   2. put the object questions containing the q&a outside the function because it doesn't belong in the logic of your game. You can think of it as external data.

   3. separate your code in functions, here we'll have askQuestion which will check for the input and display the success/failure message ; and randomQuestion which will get a random question from the questions and print it on the screen.

2. We will use an event listener with addEventListener linked to the button:

   document.querySelector('#submit').addEventListener('click', askQuestion)
   

   This will trigger the function askQuestion every time the button is clicked.

3. About askQuestion:

   The user has either entered the correct answer or not. If the former another question is displayed with randomQuestion and success message appears, if the latter a failure message appears. If the question has changed answer will be updated.

4. About randomQuestion:

   1. The following will take a random element from the questions array:

      questions[Math.floor(Math.random() * questions.length)]
      

   2. clean up the input box by adding an empty string:

      document.querySelector('#user-answer').value = '';
      

   3. Create an element with document.createElement, add the actual question to the element, remove the previous question and append the new question element to #question:

      const element = document.createElement('div');
      element.innerHTML = question.question;
      
      document.querySelector('#question').firstChild.remove();
      document.querySelector('#question').appendChild(element.firstChild);
      

   4. return the answer

      return question.answer;
      

---

Here is the full JavaScript code:

document.querySelector('#submit').addEventListener('click', askQuestion)

const questions = [{
    question: 'Is the price higher or lower than $40.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $100.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $50.00?',
    answer: 'lower'
  }
];

function askQuestion() {
  if(answer && document.querySelector('#user-answer').value == answer) {
    document.querySelector('#correct').style.display  = 'block';
    document.querySelector('#sorry').style.display = 'none';
    answer = randomQuestion()
  } else {
    document.querySelector('#correct').style.display  = 'none';
    document.querySelector('#sorry').style.display = 'block';
  }
}


function randomQuestion() {
  const question = questions[Math.floor(Math.random() * questions.length)];

  document.querySelector('#user-answer').value = '';

  const element = document.createElement('div');
  element.innerHTML = question.question;

  document.querySelector('#question').firstChild.remove();
  document.querySelector('#question').appendChild(element.firstChild);

  return question.answer;
}

let answer = randomQuestion();

document.querySelector('#submit').addEventListener('click', askQuestion)

const questions = [{
    question: 'Is the price higher or lower than $40.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $100.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $50.00?',
    answer: 'lower'
  }
];

function askQuestion() {
  if (answer && document.querySelector('#user-answer').value == answer) {
    document.querySelector('#correct').style.display = 'block';
    document.querySelector('#sorry').style.display = 'none';
    answer = randomQuestion()
  } else {
    document.querySelector('#correct').style.display = 'none';
    document.querySelector('#sorry').style.display = 'block';
  }
}


function randomQuestion() {
  const question = questions[Math.floor(Math.random() * questions.length)];

  document.querySelector('#user-answer').value = '';

  const element = document.createElement('div');
  element.innerHTML = question.question;

  document.querySelector('#question').firstChild.remove();
  document.querySelector('#question').appendChild(element.firstChild);

  return question.answer;
}

let answer = randomQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2 id="question"><span></span></h2>
</div>
<label for="text">Answer:</label>
<input id="user-answer" type="text" value="">
<button id="submit" type="submit">Submit</button>

<p id="sorry" style="display: none">Sorry...</p>
<p id="correct" style="display: none">You got it!</p>

Answer 2

First of all I would change your object structure:

var questions = [
    {
        question: 'Is the price higher or lower than $40.00?', 
        answer: 'higher'
    },
    {
        question: 'Is the price higher or lower than $100.00?', 
        answer: 'higher'
    },
     {
        question: 'Is the price higher or lower than $50.00?', 
        answer: 'lower'
    }
];

Once you change to this structure you'll be able to access the questions by using your previous code: var index = Math.floor(Math.random()*questions.length). This will return the index for your question. Now you can access the object like: questions[index].question or question[index].answer.