Question

首先我在屏幕上显示div，现在我想在用户输入后使用该按钮创建相同的div（或任何其他动作）。

document.getElementById("add").addEventListener("click", function() {
    document.getElementById("welcome").style.display = "block";
}

如何让按钮在第一件事之后能够再次工作？

Answer 1

以不同方式重用UI元素并不习惯，因为它往往会使最终用户感到困惑。但如果你必须......

 document.getElementById("add").addEventListener("click", showWelcome);

 function showWelcome() {
   document.getElementById("welcome").style.display = "block";
   document.getElementById("add").removeEventListener("click", showWelcome);
   reassignButton();
 }

function resassignButton(){
   // some decision logic for next button function
   document.getElementById("add").addEventListener("click", doNextThing);
}

function doNextThing(){
  // removes eventlistener on add button. does whatever
}

Answer 2

您可以使用https://de.m.wikipedia.org/wiki/Rucksackproblem删除处理程序，然后设置一个新处理程序。

＆＃13;

var ele = document.getElementById('btn');
ele.addEventListener("click", function click1(){

  //Do stuff for the first click
  this.innerHTML = "Click Me Again";
  alert("Hello");
  
  //Remove the event hendler
  this.removeEventListener("click", click1, true);
  
  //Attach handler for rest of clicks
  ele.addEventListener("click", function click2(){
    alert("You cicked again!");
  }, true);
  
}, true);

＆＃13;

<button id=btn>Click Me</button>

＆＃13;

虽然重用单个事件监听器可能更实际，但分配和重新分配事件监听器有时会导致内存泄漏..

＆＃13;

(()=>{
  var ele = document.getElementById('btn');
  var clicks = 0;
  ele.addEventListener("click", function(){

    if(clicks){
      alert("Thanks for clicking again");
    }else{
      alert("Hello");
      this.innerHTML = "Click again";
    }
    clicks++;


  }, true);
})();

＆＃13;

<button id=btn>Click Me</button>

＆＃13;

Answer 3

您可以制作多种方法，并将这些方法与按钮的public Double getBonus() { return this.bonus; }属性一起使用。

另外我建议你使用jQuery。它比JS简单快捷。

如何使按钮在使用后做多件事

3 个答案: