CODEWITHSUNDEEP
javascriptbutton
Waleed Ahmad
Waleed Ahmad

Reputation: 57

JavaScript not further executed once a button is disabled

I am using next and prev buttons so one question will be shown at a time, however, once next or prev buttons are disabled, the other button doesn't work anymore either. Here's my code:

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

Upvotes: 0

Views: 74

Answers (2)

mplungjan
mplungjan

Reputation: 178011

I think you want this simplified script

I had to guess the HTML, but there is only one function.

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>

Upvotes: 3

Nitheesh
Nitheesh

Reputation: 19986

Since this is a quiet interesting java script task, Im doing my own solution.

Hope this matches the requirement.

I have created 4 divs of which first one is only displayed at first. Remaining divs are placed hidden. On clicking next, the divs are displayed according to index. Once the last and first indexes are interpreted, the respective next and previous buttons are enabled and disabled.

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

function initialize() {
  for (var i = 0; i < questions.length; i++) {
    qElems.push(document.getElementById(questions[i]));
  }
}

function updatevisibilitystatus(showindex, hideindex) {
  qElems[showindex].style.display = 'block';
  qElems[hideindex].style.display = 'none';
  showing[showindex] = 1;
}

function next() {
  for (var i = 0; i <= showing.length; i++) {
    if (showing[i] == 1) {
      showing[i] = 0;
      if (i == showing.length - 2) {
        document.getElementById("next").disabled = true;
      } 
      updatevisibilitystatus(i + 1, i);
      document.getElementById("prev").disabled = false;
      break;
    }
  }
}

function prev() {
  for (var i = 0; i <= showing.length; i++) {
    if (showing[i] == 1) {
      showing[i] = 0;
      if (i == 1) {
        document.getElementById("prev").disabled = true;
      } 
      updatevisibilitystatus(i - 1, i);
      document.getElementById("next").disabled = false;
      break;
    }
  }
}
<body onload="initialize()">
  <div id="q0" style="display: block;">Q0</div>
  <div id="q1" style="display: none;">Q1</div>
  <div id="q2" style="display: none;">Q2</div>
  <div id="q3" style="display: none;">Q3</div>
  <button id="prev" disabled onclick="prev()">Prev</button>
  <button id="next" onclick="next()">Next</button>
</body>

Upvotes: 0

Related Questions