无法让我的Javascript添加或删除类

Question

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");
};

Answer 1

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");
};

Answer 2

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