Как отобразить новый вопрос, скрывая предыдущие вопросы после вызова клавиатуры

Question

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

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

var firstOperation = "ADD";
var upRange = 10;
var questiNum = 10;

var max = parseInt(upRange);
var min = 0;
var questRight = 0;
var quantQuest = 0;

$(function() {
  var operators = setOperator(firstOperation);
   var num1 = getRandomInt(min, max);
   var num2 = getRandomInt(min, max);
   displayQuestion(num1, num2, operators);
   checkQuest(num1, num2, operators);
  }

});

function setOperator(firstOperation) {
  if (firstOperation === "ADD") {
    console.log("setOperation: ADD");
    return '+';
  } else if (firstOperation === "SUBTRACT") {
    console.log("setOperation: SUBTRACT");
    return '-';
  } else if (firstOperation === "MULTIPLY") {
    console.log("setOperation: MULTIPLY");
    return '*';
  } else if (firstOperation === "DIVIDE") {
    console.log("setOperation: DIVIDE");
    return '/';
  } else {
    return alert("Operator did not work!!");
  }
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function displayQuestion(num1, num2, operators) {
  $('#question').html(num1 + ' ' + operators + ' ' + num2 + ' = ');
}

function checkQuest(num1, num2, operators) {
  $('#question-answer').keyup(function(e) {
    if (e.which == 13) {
      $('#question-answer').attr('disabled', true);
      $(this).attr('disabled', true);
      $(this).after(function() {
        if (eval(num1 + operators + num2) == $('#question-answer').val()) {
          questRight++;
          console.log("RIGHT!!!" + questRight);
        }

      });
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="question-section">
  <div id="questionbox">
    <p id="question">&nbsp;</p>
    <div id="answerbox">
      <div class="input-group">
        <input id="question-answer" type="text">
      </div>
    </div>
  </div>
</div>

Answer 1

отредактировано - после комментариев.

Проблема в том, что вы не вызываете функцию для «перезагрузки» вопроса.

Этот фрагмент измененного кода, который будет вставлен, вызовет метод «loadNextQuestion», после каждого нажатия клавиши.

Я переместил случайные числа в глобальное использование, чтобы вы могли использовать одно и то же событие.

Также нет необходимости отключать.

var firstOperation = "ADD";
var upRange = 10;
var questiNum = 10;

var max = parseInt(upRange);
var min = 0;
var questRight = 0;
var quantQuest = 0;

//make them global
var num1;
var num2;
var operators;

$(function() {
  loadNextQuestion();
  addCheckQuestEvent(operators, quantQuest);
});

function loadNextQuestion() {
  operators = setOperator(firstOperation);
  num1 = getRandomInt(min, max);
  num2 = getRandomInt(min, max);
  displayQuestion(quantQuest);
}

function setOperator(firstOperation) {
  if (firstOperation === "ADD") {
    console.log("setOperation: ADD");
    return '+';
  } else if (firstOperation === "SUBTRACT") {
    console.log("setOperation: SUBTRACT");
    return '-';
  } else if (firstOperation === "MULTIPLY") {
    console.log("setOperation: MULTIPLY");
    return '*';
  } else if (firstOperation === "DIVIDE") {
    console.log("setOperation: DIVIDE");
    return '/';
  } else {
    return alert("Operator did not work!!");
  }
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function displayQuestion() {
  var containerQuestion = $('#question');
  containerQuestion.text(`${num1} ${operators} ${num2} =`);
}

function addCheckQuestEvent() {
  $(`#question-answer`).keyup(function(e) {
    if (e.which == 13) {
      $(this).after(function() {
        if (eval(num1 + operators + num2) == $(`#question-answer`).val()) {
          questRight++;
          console.log("RIGHT!!!" + questRight);
        }
        quantQuest++;
        if (quantQuest<10) {
          loadNextQuestion();
        }
        else {
          alert(`bye bye, you answered: ${questRight} `);
        }
      });
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="question-section">
  <div id="questionbox">
  <p id="question"></p>
    <div id="answerbox">
      <div class="input-group">
        <input id="question-answer" type="text">
      </div>
    </div>
  </div>
</div>