Как я могу исправить свой для l oop в javascript викторине? - PullRequest
Новая
       9

Как я могу исправить свой для l oop в javascript викторине?

0 голосов
/ 19 апреля 2020

Я делаю тест javascript, используя одну страницу HTML. По какой-то причине мой код будет отображать только один вопрос, и после нажатия на элемент он не перейдет к следующему вопросу. И он не начинает тест с первого вопроса.

Я использовал for l oop внутри for l oop. Первый l oop отображает вопрос, а другой - соответствующий выбор. Вопросы и выборы хранятся в массиве, содержащем объекты.

Я кодирую с Javascript и jQuery только несколько недель, поэтому вам придется рассказать мне в начинающих терминах. Я должен буду рефакторинг это. Я прошу прощения за то, что это было немного грязно.

Я попытался убрать команды return. То же самое с preventDefault, без изменений. 

function renderQuiz(i) {
  $heading.text("");
  $mainDiv.text("");
  $heading.text(quizQuestions[i].question);

  for (var j = 0; j < quizQuestions[i].choices.length; j++) {
    //console.log(quizQuestions[0].choices.length);
    var li = document.createElement("li");
    li.innerText = JSON.stringify(quizQuestions[i].choices[j]);
    $mainDiv.append(li);
  };

  $('li').on("click", function() {
    if (event.target.matches('li')) {
      event.preventDefault();
      var guess = event.target.innerText;
      var answer = (JSON.stringify(quizQuestions[i].answer[0]));
      if (guess === answer) {
        timeLeft += 10;
        console.log(timeLeft + "it works");
      } else {
        timeLeft -= 10;
        console.log(timeLeft)
      };
    }
  });
  return;
};

mainPage();

$button.on("click", function(click) {
  event.preventDefault();
  for (var i = 0; i < quizQuestions.length; i++) {
    renderQuiz(i);;
  }
});

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

В обработчике onclick $ button есть ошибка (в вашей консоли должно быть «Uncaught ReferenceError: событие не определено»).

Если функция принимает , нажмите в качестве параметра тогда вам следует применить метод protectDefault () к тому же параметру. Другими словами вместо 

$button.on("click", function(click) {
  event.preventDefault();

у вас должно быть 

$button.on("click", function(event) {
  event.preventDefault();

Кстати, здесь такая же ошибка 

$('li').on("click", function() {

у вас должно быть 

$('li').on("click", function(event) {

Надеюсь, это поможет.

0 голосов
/ 19 апреля 2020

Событие нажатия кнопки $ повторяет все вопросы, поэтому отображается последний вопрос.

Вам нужно определить переменную i вне функции нажатия кнопки $, затем увеличить я при каждом нажатии кнопки. 

var i = -1;

function renderQuiz(i) {
  ...
};

mainPage();

$button.on("click", function(click) {
  event.preventDefault();
  renderQuiz(++i);
});
...