В чем может быть ошибка?

Question

[Lakalut22]

Попытался написать тест, собрал код и после каких-то корректив перестал нормально отображаться, не могу понять где именно косяк...

Прикладываю ссылку.

А так же код по частям:

<div class="quiz-container"> 
  <div id="quiz"></div> 
</div> 
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button> 
<div id="results"></div>

.slide{ position: absolute; left: 0px; top: 0px; width: 100%; z-index: 1; opacity: 0; transition: opacity 0.5s; } 
.active-slide{ opacity: 1; z-index: 2; } 
.quiz-container{ position: relative; height: 200px; margin-top: 40px; }

function buildQuiz(){const output = []; myQuestions.forEach( (currentQuestion, questionNumber) => {const answers = []; for(letter in currentQuestion.answers){ answers.push( `<label> <input type="radio" name="question${questionNumber}" value="${letter}"> ${letter} : ${currentQuestion.answers[letter]} </label>` ); } output.push( `<div class="slide"> <div class="question"> ${currentQuestion.question} </div> <div class="answers"> ${answers.join("")} </div> </div>` );  } ); quizContainer.innerHTML = output.join(''); }

function showResults()
{ 
	const answerContainers = quizContainer.querySelectorAll('.answers'); 
	let numCorrect = 0; 
	myQuestions.forEach( (currentQuestion, questionNumber) => {const answerContainer = answerContainers[questionNumber];
	const selector = `input[name=question${questionNumber}]:checked`; 
	const userAnswer = (answerContainer.querySelector(selector) || {}).value; 
		if(userAnswer === currentQuestion.correctAnswer){numCorrect++; answerContainers[questionNumber].style.color = 'lightgreen'; } 
		else{ answerContainers[questionNumber].style.color = 'red'; } }); 
resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`; } 

function showSlide(n) { slides[currentSlide].classList.remove('active-slide'); slides[n].classList.add('active-slide'); currentSlide = n; 
	if(currentSlide === 0){ previousButton.style.display = 'none'; } 
	else{ previousButton.style.display = 'inline-block'; } 
		if(currentSlide === slides.length-1){ nextButton.style.display = 'none'; submitButton.style.display = 'inline-block'; } 
		else{ nextButton.style.display = 'inline-block'; submitButton.style.display = 'none'; } } 

function showNextSlide() { showSlide(currentSlide + 1); } 
function showPreviousSlide() { showSlide(currentSlide - 1); } 

const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results'); 
const submitButton = document.getElementById('submit');
const myQuestions = [ { question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Who can help us?", answers: { a: "Noone", b: "Specialists", c: "Youself" }, correctAnswer: "b" }, { question: "Which language can you use to write it?", answers: { a: "PHP", b: "Java Script", c: "CSS"}, correctAnswer: "b" } ]; 

const previousButton = document.getElementById("previous"); 
const nextButton = document.getElementById("next"); 
const slides = document.querySelectorAll(".slide"); 
let currentSlide = 0; 
showSlide(currentSlide);

submitButton.addEventListener('click', showResults);

previousButton.addEventListener("click", showPreviousSlide); nextButton.addEventListener("click", showNextSlide);

Comments

[StiflerProger]

У тебя нет блоков с классом "slide" в документе
поэтому в строке

slides[currentSlide].classList.remove('active-slide')

выдаётся ошибка т.к slides[currentSlide] === undefined

[Lakalut22]

StiflerProger, А разве внутри функции BuildQuiz они не задаются? После output.push.

... output.push( `<div class="slide"> <div class="question"> ...

[StiflerProger]

Lakalut22, понял. Но у тебя функция buildQuiz нигде не запускается.

buildQuiz();
const slides = document.querySelectorAll(".slide");

[Lakalut22]

StiflerProger, Заработало! Точно! Спасибо большое.

:D

Answer 1

[fallus]

Не знаю как это должно работать, но что-то происходит, если:

1. Вызвать buildQuiz()
2. Переместить это:

spoiler

const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results'); 
const submitButton = document.getElementById('submit');
const myQuestions = [ { question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Who can help us?", answers: { a: "Noone", b: "Specialists", c: "Youself" }, correctAnswer: "b" }, { question: "Which language can you use to write it?", answers: { a: "PHP", b: "Java Script", c: "CSS"}, correctAnswer: "b" } ]; 

const previousButton = document.getElementById("previous"); 
const nextButton = document.getElementById("next");

В самый верх.

Переместить это:

const slides = document.querySelectorAll(".slide");

в начало функции showSlide