Javascript个性测验使用困难'；这'；和数据-*属性

我正在尝试使用纯javascript为uni作业创建一个点击式个性测验。我安排了一堆div，以便它们出现。每个问题都有一个包含4个（左右）答案的列表，这些答案与不同的人格类型有关。我打算保留一个对象数组来记录每个选择的答案，并在最后提供人格类型的分类

我目前被困在函数上，无法使用

记录所选数据并将其添加到answers数组中

隐藏当前问题div并

显示下一个问题div

HTML：

<div class="question" id="q1"  data-next="q2">
  <h2>Question 1:</h2>
  <p>Which of the following is your favourite movie? </p>
  <ol class="button">
    <li data-score="Ninja">Karate Kid</li>
    <li data-score="Robot">Wall-E</li>
    <li data-score="Pirate">Pirates of the Caribbean</li>
    <li data-score="Zombie">Dawn of the Dead</li>
  </ol>
</div>

<div class="question" id="q2" data-next="q3">
  <h2>Question 2:</h2>
  <p>A building is on fire and you hear a child's screaming for help from the third floor window. Do you: </p>
  <ol class="button">
    <li data-score="Ninja">Mysteriously disappear and re-appear with the children</li>
    <li data-score="Robot">Run in and save the child on the second floor, because i'm made of metal and fire won't hurt me!</li>
    <li data-score="Pirate">Dress up as a pirate and loot the surrounding neighbourhood, including the bank?</li>
    <li data-score="Zombie">Eat all the brains. Nom nom uuuuggghhh.</li>
  </ol>
</div>

请停下来

另外，我不知道显示系列中下一个元素的代码是否可以工作，因为我的错误检查还没有完成。我只是写了我的大脑暗示可能有用的东西

编辑：去掉了.value，因为我不知道为什么一开始就有它。 还更改了最后一行，使nextQuestion成为变量而不是字符串。问题现在以渐进方式显示/隐藏（当我注释掉answerData行时）

我猜这意味着我要增加所选答案类型的数组值

answerData[selectedType].score++ ;

---

answerData是一个数组。但您使用它时，就好像它是一个具有属性的对象一样。您可以将数组更改为具有属性名称的对象，或者必须映射name属性并获取所选值的索引

将数组更改为如下所示的对象：

var answerData = {
    "Ninja": { score: 0 },
    "Robot": { score: 0 },
    "Pirate": { score: 0 },
    "Zombie": { score: 0 }
}

以及从“selectedType”字符串到实际对象的快速更改：

answerData[selectedType].score++; // remove quote around selectedType

或者将其保留为数组，但通过首先创建映射名称的数组来更新其更新方式：

var answerDataNames = answerData.map(function(obj){
    return obj.name;
}

然后，您的代码将如下所示：

 // Get the current element's data-score value
var selectedType = this.dataset.score;
// Increase the selected answer's 'type' by 1
var selectedIndex = answerDataNames.indexOf(selectedType);
answerData[selectedIndex].score++;

---

有几件事需要纠正：

当您将处理程序绑定到

ol

元素时，

此

引用该元素。该元素上不存在分数数据。相反，您可以使用事件对象的

目标

来了解实际单击的元素

检索

数据得分

属性的值时，您应该只参考

数据集.score

，而不是

数据集.score.value

answerData[“selectedType”]

有两个问题：它将

answerData

处理为对象而不是数组；以及“selectedType”是一个文本，它不会成为同名变量的值。请删除引号，并将数据结构

answerData

更改为普通对象，而不是数组：

var answerData = { // one object, with names as keys, scores as values
    "Ninja": 0,
     "Robot": 0,
    "Pirate": 0,
    "Zombie": 0};

getElementById

的参数不应以散列开头。您需要以不带散列的方式传递id

…你需要用忍者的东西来完成其他问题…；-）

下面是带有这些更正的代码--我没有完全完成第5点：

//创建一个侦听器，用于单击首页上的“开始测验”按钮。
document.getElementById（“BeginQuery”）.addEventListener（“单击”，startQuiz）；
//单击按钮时，“简介”部分隐藏，并显示第一个问题部分
函数startQuiz（）{
document.getElementById（“intro”）.style.display=“无”；
document.getElementById（“q1”）.style.display=“block”；
}
//创建一个数组对象来存储所有测验答案。每个选定的答案应将类别分数增加1。结果中个性“类型”得分最高。
var answerData={//一个对象，名称作为键，分数作为值
“忍者”：0，
“机器人”：0，
“海盗”：0，
“僵尸”：0}；
//获取所有的.button元素
var buttons=document.queryselectoral（“.button”）；
//向每个元素添加一个onclick事件监听器，每个元素都有一个.button类
对于（变量i=0；i

。问题，#结果{
显示：无；
}
李先生{
边框：1px实心；
边界半径：3px；
背景色：#eee；
文本对齐：居中；
线高：2米；
填充：0.5em；
边缘：0.5em；
宽度：80%；
保证金：0自动；
}
.按钮李：悬停{
颜色：#bfbf；
背景色：#555；
}
#介绍、、问题、#结果{
最大宽度：600px；
保证金：0自动；
}
#贝格奎兹{
边框：1px实心；
边界半径：3px；
背景色：#eee；
文本对齐：居中；
线高：2米；
填充：0.5em；
边缘：0.5em；
宽度：20em；
保证金：0自动；
}
#贝格斯：悬停{
颜色：#bfbf；
背景色：#555；
}

欢迎来到Ewan L的作业1测验。
开始测验
问题1：
以下哪一部是你最喜欢的电影

空手道小子
Wall-E
加勒比海盗
死亡的黎明
问题2：
一栋楼着火了，你听到一个孩子从三楼的窗户呼救。你是否：

Mys
 // Get the current element's data-score value
var selectedType = this.dataset.score;
// Increase the selected answer's 'type' by 1
var selectedIndex = answerDataNames.indexOf(selectedType);
answerData[selectedIndex].score++;

var answerData = { // one object, with names as keys, scores as values
    "Ninja": 0,
     "Robot": 0,
    "Pirate": 0,
    "Zombie": 0};