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

Question

我正在创建一个简单的测验，询问用户他们应该购买哪种汽车。我无法像我希望的那样让测验一次显示一个问题。我不确定我做错了什么。完整代码在 this codepen 上

我确定问题出在这部分代码上。有人可以告诉我我做错了什么吗？

//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

您好，看来有两件事需要更新

1. 将“#”添加到您的元素选择器
2. 使用 onclick 代替 onClick

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