CODEWITHSUNDEEP
javascriptcss
user7876451
user7876451

Reputation:

Can't get my Javascript to add or remove class

I'm creating a simple quiz that asks users what kind of car they should buy. I can't get the quiz to show one question at a time like I want it to. I'm not sure what I'm doing wrong. The full code is on this codepen

I'm sure the problem is this part of the code though. Can someone tell me what I'm doing wrong? 

//question counter
var question = 1;
maxQuestions = 4;

//event handler for click event
var nextButton = document.getElementById('next');
nextButton.onClick = function() {
  question++;
  if (question === maxQuestions) {
    //hide the next button
    $(nextButton).addClass("hidden");
  }
  //hide the last question  
  $('question' + (question - 1)).addClass("hidden");
  //show the current question  
  $('question' + question).removeClass("hidden");  
};

var prevButton = document.getElementById('prev');
prevButton.onClick = function() {
  question--;
  if (question === 1) {
    //hide the prev button
    $(prevButton).addClass("hidden");
  }
  //hide current question
  $('question' + (question + 1)).addClass("hidden");
  //show the last question
  $('question' + question).removeClass("hidden");
};

//show submit
if (question === maxQuestions) {
  $('submit').removeClass("hidden");
};

Upvotes: 0

Views: 81

Answers (2)

user49438
user49438

Reputation: 909

You're using jQuery already, so you don't necessarily have to keep track of the questions with indexes. jQuery provides .siblings(), .next(), and .prev() to help navigate.

For example a quick solution that uses those instead of indices could look like this

https://codepen.io/anon/pen/mmWXeQ?editors=1111

Upvotes: 0

mrdeleon
mrdeleon

Reputation: 645

Hello it looks like there are 2 things that need to get updated

  1. Added '#' to your element selector
  2. using onclick instead of onClick

here is a link to the update in codepen https://codepen.io/anon/pen/PmpQxo

//question counter
var question = 1;
maxQuestions = 4;

//event handler for click event
var nextButton = document.getElementById('next');
nextButton.onclick = function() {
  question++;
  if (question === maxQuestions) {
    //hide the next button
    $(nextButton).addClass("hidden");
  }
  console.log('next', question);
  //hide the last question  
  $('#question' + (question - 1)).addClass("hidden");
  //show the current question  
  $('#question' + question).removeClass("hidden");  
};

var prevButton = document.getElementById('prev');
prevButton.onclick = function() {
  question--;
  if (question === 1) {
    //hide the prev button
    $(prevButton).addClass("hidden");
  }
  //hide current question
  $('#question' + (question + 1)).addClass("hidden");
  //show the last question
  $('#question' + question).removeClass("hidden");
};

//show submit
if (question === maxQuestions) {
  $('#submit').removeClass("hidden");
};

Upvotes: 1

Related Questions