如何在调用按键后显示新问题而隐藏以前的问题

<div id="question1" class="question">问题1</div>
<div id="question2" class="question">问题2</div>
<div id="question3" class="question">问题3</div>

<button id="nextButton">下一个问题</button>

.question {
  display: none;
}

// 获取问题和按钮的元素
var questions = document.getElementsByClassName('question');
var nextButton = document.getElementById('nextButton');

// 当前显示的问题索引
var currentQuestionIndex = 0;

// 显示下一个问题的函数
function showNextQuestion() {
  // 隐藏当前显示的问题
  questions[currentQuestionIndex].style.display = 'none';
  
  // 显示下一个问题
  currentQuestionIndex++;
  if (currentQuestionIndex >= questions.length) {
    currentQuestionIndex = 0; // 如果已经是最后一个问题，则从头开始循环显示
  }
  questions[currentQuestionIndex].style.display = 'block';
}

// 绑定按钮的点击事件，点击后显示下一个问题
nextButton.addEventListener('click', showNextQuestion);