Using an onclick function multiple times

Question

Imagine you're using an image to call a function like this:

<img src="images/next.png" alt="" class="transition opacity" onclick="nextQ()" />

and you have a function with this:

function nextQ(id) {
var prevQuestion = 0;
var currentQuestion = 1;

prevQuestion++;
currentQuestion++;
var elem = document.getElementById("q" + prevQuestion);
elem.parentNode.removeChild(elem);

document.getElementById("q" + currentQuestion).style.cssText = 'display:inline;';
next.style.cssText = 'display:none;';}

How could I make it so every time you click on the image the function happens. At the moment it only happens when you click on it the first time, and nothing happens when you click the second time.

are you sure? put alert('test'); in your function and see if it fires both times. — Medda86, May 08 '14 at 17:05
yeah I thought so too, but it doesnt seem to work in this case. — , May 08 '14 at 17:07

score 1 · Answer 1 · answered May 08 '14 at 17:17

your prevQuestion && your currentQuestion are resetting each time you run that function, if you want them to increment each time make them global variables ( place them outside your function ), like this:

var prevQuestion = 0;
var currentQuestion = 1;

function nextQ(id) {

    prevQuestion++;
    currentQuestion++;    

}

here's a working example http://jsfiddle.net/Tt8f6/

score 1 · Answer 2 · edited May 23 '17 at 12:15

onclick="nextQ()"

Just an FYI, using event handlers in the mark up is bad practise. See this SO topic.

Formatting and indentation aside the problem is the variable your using to save state are being lost and recreated each time the function executes. You need to move them to a higher scope and manage them there:

var nextQ = (function() {
  var prevQuestion    = 0;
  var currentQuestion = 1;

  function nextQ() { // You never referenced the id argument.
    prevQuestion++;
    currentQuestion++;

    var elem = document.getElementById("q" + prevQuestion);
    elem.parentNode.removeChild(elem);

    document.getElementById("q" + currentQuestion).style.cssText = 'display:inline;';
    next.style.cssText = 'display:none;'; // This is not defined!
  }

  return nextQ;
})();

Lastly the above code doesn't offer must in the way of manipulation or inspection. Although functional and the correct (simplest-ish) answer I'm going to go further and really abstract things:

function QuestionStateMachine(id_prefix) {
  this.id_prefix       = id_prefix;
  this.currentQuestion = 1;
}
QuestionStateMachine.prototype.nextQ = function() {
  var current  = this.currentQuestion++;
  var previous = current - 1;
  var next     = current + 1;

  var prevEl    = document.getElementById('' + this.id_prefix + previous);
  var currentEl = document.getElementById('' + this.id_prefix + current)
  var nextEl    = document.getElementById('' + this.id_prefix + next)

  prevEl.parentNode.removeChild(prevEl);
  currentEl.style.cssText = 'display:inline;';
  nextEl.style.cssText = 'display:none;';
};

var quizSM = new QuestionStateMachine('q');
document.getElementsByClassName('quiz-button').forEach(function(button) {
  button.addEventListener('click', quizSM.nextQ.bind(quizSM));
});

Using an onclick function multiple times

2 Answers2