Javascript 多次使用onclick函数

假设您正在使用图像调用如下函数：

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

var prevQuestion = 0;
var currentQuestion = 1;

function nextQ(id) {

    prevQuestion++;
    currentQuestion++;    

}

---

我怎么能做到每次你点击图像时，功能都会发生。目前，只有第一次单击时才会发生，第二次单击时不会发生任何情况。

每次运行该函数时，您的prevQuestion和currentQuestion都会重置，如果您希望它们每次递增，请将它们设置为全局变量（将它们放置在函数外部），如下所示：

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

var prevQuestion = 0;
var currentQuestion = 1;

function nextQ(id) {

    prevQuestion++;
    currentQuestion++;    

}

这里有一个有效的例子

仅供参考，在标记中使用事件处理程序是不好的做法。看这个

除了格式和缩进之外，问题在于每次执行函数时，用于保存状态的变量都会丢失并重新创建。您需要将它们移动到更高的范围并在其中进行管理：

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

最后，上面的代码没有提供必须的操作或检查方式。虽然功能性和正确（最简单的ish）的答案，但我将更进一步，真正抽象的东西：

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

---

你确定？发出警报（“测试”）；在你的函数中，看看它是否两次都启动。Onclick已经在你每次单击时执行了…是的，我也这么认为，但在这种情况下它似乎不起作用。