一旦按钮被禁用，JavaScript 就不会进一步执行

Question

我正在使用下一个和上一个按钮，因此一次会显示一个问题，但是，一旦禁用下一个或上一个按钮，另一个按钮也不再起作用。这是我的代码:

var showing = [1, 0, 0, 0];
var questions = ['q0', 'q1', 'q2', 'q3'];

function next() {
  var qElems = [];
  for (var i = 0; i < questions.length; i++) {
    qElems.push(document.getElementById(questions[i]));
  }
  for (var i = 0; i <= showing.length; i++) {
    if (showing[i] == 1) {
      showing[i] = 0;
      if (i == showing.length - 1) {
        document.getElementById("next").disabled = true;
      } else {
        console.log(i);
        qElems[i + 1].style.display = 'block';
        qElems[i].style.display = 'none';
        showing[i + 1] = 1;
      }
      break;
    }
  }
}

function prev() {
  var qElems = [];
  for (var i = 0; i < questions.length; i++) {
    qElems.push(document.getElementById(questions[i]));
  }
  for (var i = 0; i <= showing.length; i++) {
    if (showing[i] == 1) {
      showing[i] = 0;
      if (i == showing.length - 4) {
        document.getElementById("prev").disabled = true;
      } else {
        qElems[i - 1].style.display = 'block';
        qElems[i].style.display = 'none';
        showing[i - 1] = 1;
      }
      break;
    }
  }
}

Answer 1

我想你想要这个简化的脚本

我必须猜测 HTML，但只有一个函数。

window.addEventListener("load", function() {
  let showing = 0;
  const questions = document.querySelectorAll(".q");
  questions[showing].style.display = "block";
  const next = document.getElementById("next");
  const prev = document.getElementById("prev");
  document.getElementById("nav").addEventListener("click", function(e) {
    var but = e.target, dir;

         if (but.id === "prev") dir = -1;
    else if (but.id === "next") dir =  1;
    else return; // not a button

    questions[showing].style.display = "none"; // hide current
    showing += dir; // up or down
    next.disabled = showing === questions.length-1;
    if (showing <= 0) showing = 0;
    prev.disabled = showing === 0 
    questions[showing].style.display = "block";
  })
})

.q { display:none }

<div class="q" id="q0">Question 0</div>
<hr/>
<div class="q" id="q1">Question 1</div>
<hr/>
<div class="q" id="q2">Question 2</div>
<hr/>
<div class="q" id="q3">Question 3</div>
<hr/>
<div id="nav">
  <button type="button" id="prev" disabled>Prev</button>
  <button type="button" id="next">Next</button>
</div>