Question

当我单击该按钮时，从给定选项中选择一个答案后，问题并没有前进到下一个。我无法确定问题，但 getStarted 函数正在工作，因为我通过 console.logging 答案对其进行了测试。请问，可能有什么问题？我是 JavaScript 新手，已经尝试解决了两天，如果解决了将不胜感激。

<!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>Quiz</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="container">
        <div class="quiz-section">
            <h1 id="question">Questions</h1>

            <ul>
                <li>
                    <input type="radio" name="answer" class="answer">
                    <label for="a" id="a-text">Question</label>
                </li>
                <li>
                    <input type="radio" name="answer" class="answer"> 
                    <label for="b" id="b-text">Question</label>
                </li>
                <li>
                    <input type="radio" name="answer" class="answer"> 
                    <label for="c" id="c-text">Question</label>
                </li>
                <li>
                    <input type="radio" name="answer" class="answer"> 
                    <label for="d" id="d-text">Question</label>
                </li>
            </ul>
        </div>
        <button id="submit">submit</button>
    </div>
    

    <script src="script.js"></script>
</body>
</html>

const questionA = document.getElementById('a-text')
const questionB = document.getElementById('b-text')
const questionC = document.getElementById('c-text')
const questionD = document.getElementById('d-text')
const QuestionEl = document.getElementById('question')
const submitEl = document.getElementById('submit')
const answerEl = document.querySelectorAll('.answer')

const quizData = [{
    question: 'whats is the most use programming language in 2021?',
    a: 'python',
    b: 'javascript',
    c: 'java',
    d: 'c',
    correct: 'b'
  },
  {
    question: 'in what year was javascript found?',
    a: '2003',
    b: '1992',
    c: '1995',
    d: '2000',
    correct: 'c'
  },
  {
    question: 'who is the ceo of facebook?',
    a: 'mark',
    b: 'jack',
    c: 'daniel',
    d: 'elon',
    correct: 'a'
  },
  {
    question: 'how old is emmanuel uzoezie?',
    a: '28',
    b: '20',
    c: '25',
    d: '23',
    correct: 'd'
  },
  {
    question: 'is javascript is the oldest progaramming language?',
    a: 'yes',
    b: 'no',
    c: 'all of the above',
    d: 'none of the above',
    correct: 'b'
  }
];

let currentQuiz = 0;

loadQuiz();

function loadQuiz() {
  const questionQuizData = quizData[currentQuiz]

  QuestionEl.innerHTML = questionQuizData.question
  questionA.innerHTML = questionQuizData.a
  questionB.innerHTML = questionQuizData.b
  questionC.innerHTML = questionQuizData.c
  questionD.innerHTML = questionQuizData.d
}

function getStartded() {
  let answers = undefined;
  answerEl.forEach((answer) => {
    if (answer.checked) {
      answers = answer.id;
    }
  })
  return answers;
}

submitEl.addEventListener('click', () => {
  const answer = getStartded();
  if (answer) {
    currentQuiz++;
    loadQuiz();
  }
})

Answer 1

问题出在您的 getStartded() 函数中的这一行：

answers = answer.id;

您的回答对象（即您的单选按钮输入）不包含 id 属性，因此当您 return answers; 时，该值始终未定义。

由于它未定义，因此您永远不会进入事件侦听器的 if。

编辑：例如，您可以通过在输入上放置 id 属性来解决此问题...

Answer 2

我希望它有效。您应该在填写后返回答案。下一个问题的答案将为空。

function getStartded() {
  let answers = undefined;
  answerEl.forEach((answer) => {
    if (answer.checked) {
      answers = answer;
    }
  })
return answers;
}

submitEl.addEventListener('click', () => {
  const answer = getStartded();
  if (answer) {
    answer.checked = false; 
    currentQuiz++;
    loadQuiz();
  }
})

Answer 3

让我们查看代码的相关部分：

let currentQuiz = 0;

loadQuiz();

function loadQuiz() {
  // note: it's advisable to use semicolons after a line of code
  const questionQuizData = quizData[currentQuiz]

  QuestionEl.innerHTML = questionQuizData.question
  // innerHTML is not necessary here 
  // because the values are pure text
  // textContent is sufficient and less risky
  // (see https://medium.com/@jenlindner22/the-risk-of-innerhtml-3981253fe217)
  questionA.innerHTML = questionQuizData.a
  questionB.innerHTML = questionQuizData.b
  questionC.innerHTML = questionQuizData.c
  questionD.innerHTML = questionQuizData.d
}

function getStartded() {

  // you are using [type=radio] input elements, so only
  // one item will be checked. This checked answer
  // can be queried using the css selector
  // ".answer:checked"
  // Now, if you add values (a - d) to these inputs
  // you can read the checked value directly as
  // document.querySelector(".answer:checked").value

  let answers = undefined;
  answerEl.forEach((answer) => {
    if (answer.checked) {
      answers = answer.id;
      // in your html the .answer elements don't have an id
      // so 'answers' will stay undefined
    }
  })
  return answers;
}

// If you use event delegation, you don't really need a button.
// See the suggested code from the snippet.
submitEl.addEventListener('click', () => {
  const answer = getStartded();
  //             ^ see comment above
  //             ^ the value of answer will always be undefined
  if (answer) {
    // because answer is undefined, this code will
    // never be reached.
    currentQuiz++;
    loadQuiz();
  }
})

我建议采用稍微不同的方法，使用 .hidden 类预先聚合 html 中的问题以隐藏尚未回答的问题，并使用 event delegation 来处理 click。

类似于：

// use event delegation
document.addEventListener(`click`, evt => {
  if (evt.target.id === `redo`) {
    document.querySelector(`#allquestions`).textContent = ``;
    return createQuestions();
  }
  if (evt.target.closest(`[data-qid]`)) {
    return score(evt);
  }
});

createQuestions();

// score handler
function score(evt) {
  const inp = evt.target.closest(`[data-qid]`);
  const checkedAnswer = inp.querySelector(`[type=radio]:checked`);
  if (checkedAnswer) {
    const response = checkedAnswer.dataset.answer;
    const currentQuestion = getQuizData([inp.dataset.qid]);
    const resultOk = checkedAnswer.value === currentQuestion.correct;
    const report = inp.querySelector(`[data-result]`);
    !resultOk && report.classList.add(`notOk`);
    report.dataset.result = 
      `${response}: ${resultOk ? `bang on!` : `nope, sorry...`}`;
    inp.querySelectorAll(`input`).forEach(el => el.remove());
    const nextQuestion = document.querySelector(`[data-qid='${
      +inp.dataset.qid + 1}']`);

    if (nextQuestion) {
      nextQuestion.classList.toggle(`hidden`);
    }
  }
}


// aggregate question data into html
function createQuestions() {
  const data = getQuizData();
  const questionsElem = document.querySelector(`#allquestions`);
  data.forEach((q, i) => questionsElem.insertAdjacentHTML(
    `beforeend`,
    `<div data-qid="${i}" class="${i > 0 ? `hidden` : ``}">
      <div>${q.question}</div>
        ${Object.entries(q)
          .filter( ([key, value]) => 
            key.length === 1)
          .map( ([k, v]) => 
            `<input type="radio" name="answer" value="${k}" data-answer=${v}>` )
          .join(``)}
      <span data-result></span>
     </div>`));
}

function getQuizData(forQuestion) {
  const questions = [{
      question: 'What is the most used programming language in 2021?',
      a: 'python',
      b: 'javascript',
      c: 'java',
      d: 'c',
      correct: 'b'
    },
    {
      question: 'In what year was javascript founded?',
      a: '2003',
      b: '1992',
      c: '1995',
      d: '2000',
      correct: 'c'
    },
    {
      question: 'Who is the CEO of facebook?',
      a: 'mark',
      b: 'jack',
      c: 'daniel',
      d: 'elon',
      correct: 'a'
    },
    {
      question: 'How old is Emmanuel Uzoezie?',
      a: '28',
      b: '20',
      c: '25',
      d: '23',
      correct: 'd'
    },
    {
      question: 'Is javascript the oldest programming language?',
      a: 'yes',
      b: 'no',
      correct: 'b'
    }
  ];
  return forQuestion ? questions[forQuestion] : questions;
}

body {
  font: normal 12px/15px verdana, arial, sans-serif;
  margin: 2rem;
}

.hidden {
  display: none;
}

[data-qid] {
  margin-bottom: 0.8rem;
}

[data-qid] div:nth-child(1) {
  font-weight: bold;
}

[data-result].notOk {
  color: red;
}

[data-result] {
  color: green;
}

[data-result]:before {
  content: attr(data-result);
}

input[type=radio] {
  display: block;
  margin: 3px 0 3px 0;
}

input[type=radio]:after {
  content: attr(data-answer);
  margin-left: 24px;
}

<div class="container">
  <div class="quiz-section">
    <h1 id="question">Questions</h1>
    <div id="allquestions"></div>
  </div>
  <button id="redo">Redo</button>
</div>

See also

Answer 4

line = line.replace('\x1b[31m', '') 是没有赋值的属性，需要在每个单选元素中添加model<-lm(vl~sex+race+gene1+gene2) anova(model) model<-lm(vl~sex+race+gene3+gene4) anova(model) model<-lm(vl~sex+race+gene5+gene6) anova(model) model<-lm(vl~sex+race+gene7+gene8) anova(model) model<-lm(vl~sex+race+gene9+gene10) anova(model)，例如：

answer.id

另一种解决方案，更新此片段代码。

html

id=option

javascript

<div class="quiz-section">
        <h1 id="question">Questions</h1>

        <ul>
            <li>
                <input type="radio" name="answer" class="answer" id="a">
                <label for="a" id="a-text">Question</label>
            </li>
            <li>
                <input type="radio" name="answer" class="answer" id="b"> 
                <label for="b" id="b-text">Question</label>
            </li>
            <li>
                <input type="radio" name="answer" class="answer" id="c"> 
                <label for="c" id="c-text">Question</label>
            </li>
            <li>
                <input type="radio" name="answer" class="answer" id="d"> 
                <label for="d" id="d-text">Question</label>
            </li>
        </ul>
    </div>
    <button id="submit">submit</button>
</div>

当我点击按钮时，问题没有进入下一个

4 个答案: