Я пытаюсь создать форму, в которой вы можете отвечать несколькими слайдами вместо прокрутки
В настоящее время, когда я нажимаю «Далее» (в JS, он вызывает next()), происходит переход к следующему слайду, нет проблем
Однако, если я попытаюсь go вернуться (нажатие кнопки «Назад» вызывает back()), заголовок отображается, но описание слайда не отображается. Но текст снова появляется на следующем слайде, если я нажимаю «Далее»
Вот мой код:
var qTitle = document.getElementById('questionTitle');
var qDesc = document.getElementById('questionDescription');
var qEntry = document.getElementById('answer');
var nextButton = document.getElementById('nextButton')
var backButton = document.getElementById('backButton')
var entry = 1
var questions = ["Slide 1 title", "Slide 2 title", "Slide 3 title"];
var descriptions = ["Slide 1 content", "Slide 2 Description", "Slide 3 stuff"]
var answerHTMLElements = ['', '<input type="checkbox">']
var answers = []
function next() {
if (entry != questions.length) {
qTitle.classList.add("fadeOut");
qDesc.classList.add("fadeOut");
setTimeout(function() {
entry = entry + 1;
qTitle.innerHTML = questions[entry - 1];
qDesc.innerHTML = descriptions[entry - 1];
backButton.classList.remove('disabled');
console.log(entry)
if (entry == questions.length) {
nextButton.innerHTML = "Done"
}
qTitle.classList.remove("fadeOut");
qTitle.classList.add("fadeIn")
qDesc.classList.remove("fadeOut");
qDesc.classList.add("fadeIn");
}, 1000);
}; };
function back() {
if (entry != 1) {
qTitle.classList.add("fadeOut");
qDesc.classList.add("fadeOut");
setTimeout(function() {
entry = entry - 1;
qTitle.innerHTML = questions[entry - 1];
qDesc.innerHTML = descriptions[entry-1];
console.log()
nextButton.innerHTML = "Next"
nextButton.classList.remove('disabled');
if (entry == 1) {
backButton.classList.add('disabled')
}
qTitle.classList.remove("fadeOut");
qTitle.classList.add("fadeIn");
}, 1000);
}; };
Как сделать так, чтобы кнопка «Назад» показывала описание слайда , как название? (Кстати, в консоли ошибок нет)