Question

无法设置空属性（设置‘innerText’）

2022-10-30

1596

javascript html css

几个月前，我参加了一次面试，面试官要求我使用 HTML5、CSS 和 Javascript 编写一个功能类似于在线性格测试的界面。

这个简单的在线测试每次会显示一个问题，答案选项在底部。当用户点击其中一个答案时，系统会继续显示下一个问题。所选答案将存储在 JS 数组中，以便在测试结束时提交。

界面会提示用户问题和答案选项，回答后会显示下一个问题。每次进行新测试时，问题顺序都应随机化。

我的 HTML 主体如下所示：

<div class="panel">
    <div class="question-container" id="question">
        <h1>Question goes here</h1>
    </div>
    <div class="option-container">
        <button type="button" class="option next" id="op1">Option 1</button>
        <button type="button" class="option next" id="op2">Option 2</button>
    </div>
    <div class="navigation">
        <p><span id="numbers">0</span> of 5 questions completed.</p>
    </div>
</div>

我的 JS 代码如下所示：

const Questions = [{
    id: 0,
    q: "I value",
    a: ["justice", "mercy"],
}, {
    id: 1,
    q: "A quiet weekend at home is",
    a: ["boring", "rejuvenating"],
}, {
    id: 2,
    q: "I prefer speakers that communicate",
    a: ["literally", "figuratively"],
}, {
    id: 3,
    q: "With people, I am more often",
    a: ["brief and to the point", "friendly and warm"],
}]

const Answers = []

var start = true;

function iterate(id){
    // Test get text
    console.log(Questions[id].q);
    console.log(Questions[id].a[0]);
    console.log(Questions[id].a[1]);

    // Getting the question
    const question = document.getElementById("question");
    const numbers = document.getElementById("numbers");

    // Setting the question text
    question.innerText = Questions[id].q;
    numbers.innerText = Questions[id].id;

    // Getting the options
    const op1 = document.getElementById("op1");
    const op2 = document.getElementById("op2");

    // Providing option text
    op1.innerText = Questions[id].a[0];
    op2.innerText = Questions[id].a[1];
}

if (start) {
    iterate(0);
}

// Next button and method
const next = document.getElementsByClassName('next')[0];
var id = 0;

next.addEventListener("click", () => {
    start = false;
    if (id < 4) {
        id++;
        iterate(id);
        console.log(id);
    } else {
        // Mark the test as finished
        Questions.innerText = "Congratulations. You have finished your personality assessment test"
        op1.innerText = "Option 1";
        op2.innerText = "Option 2";
    }
  
})

但是，我在尝试运行代码时遇到问题，界面无法显示任何问题或答案，只能显示静态 HTML 文件设置的初始文本（问题在此处，选项 1，选项 2）。另外，我打开了浏览器的检查工具，控制台显示以下错误消息：

Uncaught TypeError: Cannot set properties of null (setting 'innerText') at iterate (script.js:38:24) at script.js:57:5

question.innerText = Questions[id].q;

如果有人遇到同样的问题并且精通 JavaScript 和前端开发，请提供解决错误的解决方案。

我已尝试根据 JavaScript 标准以及来自类似代码和项目的参考，使用给定的示例问题和答案编写在线测试界面。但结果并不理想，界面上并没有显示问题和答案。

Answer 1

您每次都应检查 opt1 和 opt2 是否不为空

next.addEventListener("click", () => {
start = false;
if (id < 4) {
    id++;
    iterate(id);
    console.log(id);
} else {
    // Mark the test as finished
    Questions.innerText = "Congratulations. You have finished your personality assessment test"
if(op1 && op2){
    op1.innerText = "Option 1";
    op2.innerText = "Option 2";
}
}

})

Answer 2

您的代码全部正确，

只是您忘记在此处添加一个 逗号 ，而我擅自更改了您的代码。
您在此处引用了另一个变量 Question 是一个 Array ，您应该引用 question 。

您的： 1.

{
    id: 1
    q: "A quiet weekend at home is",
    a: ["boring", "rejuvenating"]
},

解决方案：

{
    id: 1,
    q: "A quiet weekend at home is",
    a: ["boring", "rejuvenating"]
},

您的：

Questions.innerText = "Congratulations. You have finished your personality assessment test"

解决方案：

question.innerText = "Congratulations. You have finished your personality assessment test"

完整解决方案

const question = document.getElementById("question");
const numbers = document.getElementById("numbers");

const Questions = [
  {
    id: 1,
    q: "I value",
    a: ["justice", "mercy"],
  },
  {
    id: 2,
    q: "A quiet weekend at home is",
    a: ["boring", "rejuvenating"],
  },
  {
    id: 3,
    q: "Random ",
    a: ["boring", "rejuvenating"],
  },
  {
    id: 4,
    q: "I prefer speakers that communicate",
    a: ["literally", "figuratively"],
  },
  {
    id: 5,
    q: "With people, I am more often",
    a: ["brief and to the point", "friendly and warm"],
  },
];

const Answers = [];

function iterate(id = 0) {
  // Test get text
  console.log(Questions[id].q);
  console.log(Questions[id].a[0]);
  console.log(Questions[id].a[1]);

  // Getting the question

  // Setting the question text
  question.innerText = Questions[id].q;
  numbers.innerText = Questions[id].id;

  // Getting the options
  const op1 = document.getElementById("op1");
  const op2 = document.getElementById("op2");

  // Providing option text
  op1.innerText = Questions[id].a[0];
  op2.innerText = Questions[id].a[1];
}

iterate();

// Next button and method
const next = document.getElementsByClassName("next")[0];
var id = 1;

next.addEventListener("click", () => {
  if (id < 5) {
    iterate(id);
    console.log(id);
    id++;
  } else {
    // Mark the test as finished
    question.innerText = "Congratulations. You have finished your personality assessment test";
    op1.innerText = "Option 1";
    op2.innerText = "Option 2";
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="panel">
      <div class="question-container" id="question">
        <h1>Question goes here</h1>
      </div>
      <div class="option-container">
        <button type="button" class="option next" id="op1">Option 1</button>
        <button type="button" class="option next" id="op2">Option 2</button>
      </div>
      <div class="navigation">
        <p><span id="numbers">0</span> of 5 questions completed.</p>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

希望它有帮助