随机显示问题的名称-值对多维数组（javascript/jquery）

我不熟悉多维数组，不熟悉使用这样的对象来显示数据。我试图实现的是循环并在数组中随机显示一个问题，然后用户将键入答案“更高或更低”，并将输入值与答案对象匹配

目前我只是将“0”显示为我的输出。我假设这与问题有关。长度部分仅作为一个数组，因为左括号由对象组成

如何生成随机问题

如果我需要进一步解释，请让我知道，但这应该只是一个简单的问题，并比较用户输入的值与答案，显示正确或不正确

$（函数（）{
函数gameStart（）{
变量问题=[
{	 
问题1：{
问题：“价格是高于还是低于40美元？”，
回答：“更高”
},
问题2：{
问题：“价格是高于还是低于100美元？”，
回答：“更高”
},
问题3：{
问题：“价格是高于还是低于50美元？”，
回答：‘较低’
}
}
];
var i；
对于（i=0；i

答复:
提交
抱歉
你明白了
 
首先，我要更改您的对象结构：

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

一旦更改为此结构，您将能够使用以前的代码访问问题：
var index=Math.floor（Math.random（）*questions.length）
。这将返回问题的索引。现在您可以访问如下对象：
questions[index]。question
或
question[index]。回答
首先，我要更改您的对象结构：

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

一旦更改为此结构，您将能够使用以前的代码访问问题：
var index=Math.floor（Math.random（）*questions.length）
。这将返回问题的索引。现在，您可以访问以下对象：
questions[index]。question
或
question[index]。回答
这里是您游戏的工作版本。以下是一些建议：

代码结构：

从更改数据结构

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

到

这样可以更容易地访问阵列，并且密钥不冗余

将包含问答的对象
问题
置于函数之外，因为它不属于游戏逻辑。您可以将其视为外部数据

在函数中分离代码，这里我们将有
askQuestion
，它将检查输入并显示成功/失败消息；和
randomQuestion
，它将从
questions
中获取一个随机问题，并将其打印在屏幕上


我们将使用一个事件侦听器，并将
addEventListener
链接到按钮：

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

这将在每次单击按钮时触发函数
askQuestion

关于
询问问题：

用户是否输入了正确答案。如果前一个问题显示为另一个问题，并显示成功消息，如果后一个问题显示失败消息。如果问题已更改，
将更新答案

关于
随机问题：

以下内容将从
问题
数组中随机抽取一个元素：

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


通过添加空字符串清理输入框：

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


使用
文档创建元素。createElement
，将实际问题添加到元素中，删除以前的问题，并将新问题元素附加到
#问题
：

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

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


回答

return question.answer;




以下是完整的JavaScript代码：

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（“#提交”）.addEventListener（'click'，askQuestion）
常量问题=[{
问题：“价格是高于还是低于40美元？”，
回答：“更高”
},
{
问题：“价格是高于还是低于100美元？”，
回答：“更高”
},
{
问题：“价格是高于还是低于50美元？”，
回答：‘较低’
}
];
函数askQuestion（）{
if（answer&&document.querySelector（'#user answer'）。value==answer）{
document.querySelector（'#correct'）.style.display='block'；
document.querySelector（'#sorry'）.style.display='none'；
答案=随机问题（）
}否则{
document.querySelector（'#correct'）.style.display='none'；
document.querySelector（'#sorry'）.style.display='block'；
}
}
函数随机问题（）{
常量问题=问题[Math.floor（Math.random（）*questions.length）]；
document.querySelector（“#用户答案”）。值=”；
常量元素=document.createElement（'div'）；
element.innerHTML=question.question；
document.querySelector（“#问题”）.firstChild.remove（）；
document.querySelector（“#问题”）.appendChild（element.firstChild）；
返回问题。答案；
}
让答案=随机问题（）

答复:
提交
抱歉
你明白了
 
这里是您游戏的工作版本。以下是一些建议：

代码结构：

从更改数据结构

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

到

这样可以更容易地访问阵列，并且密钥不冗余

将包含问答的对象
问题
置于函数之外，因为它不属于游戏逻辑。您可以将其视为外部数据

在函数中分隔代码，这里我们将