Question

我正在尝试编写一个简单的测验应用程序。我试图在最后一次单击按钮3次时将隐藏屏幕放在最后。这是我尝试过的：

for (var i = 0; i > 2; i++) {
  onEvent("button26", "click", function() {
    setScreen("TrollScreen");
    playSound("sound://default.mp3", false);
  });
}

我对代码很陌生，我不确定该怎么做。感谢您的帮助。

Answer 1

您需要将点击计数保持在事件处理程序之外。然后在其中可以检查该值并显示屏幕或相应增加计数器。

var count = 0;
onEvent("button26", "click", function(){
    if(count > 2){
      setScreen("TrollScreen");
      playSound("sound://default.mp3", false);
    }else{
      count++;
    }
});

Answer 2

由于所有DOM元素实际上都是对象，因此您可以在其上附加一个属性，该属性将用作计数器，因此，当单击按钮时，您可以将该属性增加1，然后检查其是否达到{{ 1}}。

更微妙的方法是使用辅助函数来附加事件并将计数器设置为封闭变量，方法如下：

然后可以像这样使用它：

function attachEventWithCounter(elem, func, maxClickCount) {
  let count = 0;
  elem.addEventListener("click", function(e) {
    count++;
    if(count >= maxClickCount) {
      func.call(this, e);
      // and probably reset 'count' to 0
    }
  });
}

attachEventWithCounter(myButton, myEventListener, 3);仅包含一个DOM元素，一个将用作事件侦听器的函数以及一个将作为最大尝试次数的数字。然后，它附加一个click事件侦听器（如果需要，您也可以传入事件的类型），然后无论何时发生该事件，它都会增加一个本地声明的变量attachEventWithCounter（最初设置为count ）并检查其是否达到最大尝试次数，如果是，则仅调用作为参数传递的函数（使用0传递自定义Function#call和event参数以模仿实际的事件侦听器）。

示例：

this

function attachEventWithCounter(elem, func, maxClickCount) {
  let count = 0;
  elem.addEventListener("click", function(e) {
    count++;
    if(count >= maxClickCount) {
      func.call(this, e);
      count = 0;
    }
  });
}


let btn = document.getElementById("myButton");

function listener() {
  alert("Clicked at last!!!");
}

attachEventWithCounter(btn, listener, 3);

Answer 3

这将在您每次按下按钮3次（至少我认为是）。而是使计数器变量从0开始，并在每次按下按钮时将其递增1。将要执行的操作放入if语句中，即

if(counter >= 3){
//do some action
}

希望有帮助！

Answer 4

您希望将计数器变量保留在事件范围之外，以跟踪其被单击的次数。例如

let counter = 0;
onEvent("button26", "click", function() {
  if(counter >= 3) {
    setScreen("TrollScreen");
    playSound("sound://default.mp3", false);
  }
  counter ++;
});

Answer 5

    //create a variable to check how many times the button has been clicked
    var buttonClick = 0;

    function CheckCount() {
        //Check if the buttonClick variable is three
        if (buttonClick == 3) {
            //if it is equal to three, display the screen and play the sound
            
            //below commented out for sake of demo
            //setScreen("TrollScreen");
            //playSound("sound://default.mp3", false);
            document.getElementById('buttonclickcount').innerHTML = "You clicked it three times";

        } else {
        //if it is not so, then increment the buttonClick variable by 1
        buttonClick++
      
      //so you can see how many times the button has been clicked 
      document.getElementById('buttonclickcount').innerHTML = buttonClick;
      }
    };

<!--I would create an onclick event on the button itself that runs a function when -->
<button onclick="CheckCount()">You Win!</button>

<div id="buttonclickcount"></div>

Answer 6

您应该看看使用闭包。在这里，您可以在返回函数之前定义变量。您返回的函数将围绕此变量关闭。您可以在this提琴中做类似的事情。

const button = document.getElementById('button');
const output = document.getElementById('output');

const click = (function() { 
  let count = 0;
  return function() {
    count++;
    if(count > 3) {
        output.innerHTML = 'Count is greater than 3: ' + count
    }
  }
})();

button.addEventListener('click', click);

如何编写仅在单击多次后才能起作用的按钮

6 个答案: