多次使用onclick函数

Using an onclick function multiple times

本文关键字：onclick 函数      更新时间：2023-09-26

想象一下，您正在使用一个映像来调用这样的函数：

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

你有一个功能：

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

我怎么能做到每次你点击图像时都会发生功能。目前，只有当你第一次点击它时，它才会发生，而当你第二次点击时，什么都不会发生。

您的上一个问题&amp；您的currentQuestion每次运行该函数时都会重置，如果您希望它们每次递增，请将它们设置为全局变量(将它们放在函数之外(，如下所示：

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

这是一个工作示例http://jsfiddle.net/Tt8f6/

onclick="nextQ()"

仅供参考，在标记中使用事件处理程序是不好的做法。请参阅本SO主题。

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

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

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

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));
});
相关文章：