addEventListener 对单击事件不起作用...

Question

我想用addEventListener处理一个带有id="ticker"的点击事件。 点击作品。

document.getElementById("ticker").onclick = function() {
timeChange(5);
}

但我不明白，为什么它不能与addEventListener

这是我写的：

document.getElementById("ticker").addEventListener("click", timeChange, false);

这是我要调用的函数timeChange ：

const display = document.getElementById("counter");
function timeChange(seconds) {
  let seconds = 5;
  display.innerText = seconds; // seconds + 1; ??
  // page.secondChild.nodeValue = seconds;
  seconds -= 1;
  if (seconds > -1) {
    setTimeout(timeChange, 1000, seconds);
  }
}

在相关问题中，我阅读了一些关于闭包的内容。 但是我在“我的” addEventListener中看不到与关闭主题相关的问题。

这是 HTML：

但在此之前是触发事件的按钮<button id="ticker"> 。 （在 HTML 末尾）

<body>
    <div id="page">
      <div id="counter">5</div>
      <div id="btn"><button id="ticker">Start Pomodoro</button></div>
    </div>
    <div id="otput">
      <p>This is your</p>
      <p id="sessions"></p>
      <p>session</p>
    </div>

    <div id="page1">
      <div id="counter1">5</div>
      <div id="btn1"><button id="ticker">Start Pomodoro</button></div>
    </div>
  </body>

Answer 1

首先，由于您没有将参数传递给timeChange ，因此该函数不应将seconds声明为一。

接下来，您需要在回调函数之外声明seconds变量，以便在被该函数更改后可以保留其值。

最后，您有两个具有相同id按钮。 id在文档中必须是唯一的。

 document.getElementById("ticker").addEventListener("click", timeChange); let display = document.getElementById("counter"); let seconds = 5; function timeChange() { display.textContent = seconds; seconds -= 1; if (seconds > -1) { setTimeout(timeChange, 1000, seconds); } }

 <div id="page"> <div id="counter">5</div> <div id="btn"><button id="ticker">Start Pomodoro</button></div> </div>

如果您确实想将参数传递给timeChange ，那么您必须将您的回调引用包装在另一个将实际成为回调的函数中。

 // Here, the callback is the anonymous function document.getElementById("ticker").addEventListener("click", function() { timeChange(5); // which will then invoke the actual function with an argument }); let display = document.getElementById("counter"); let seconds = null; function timeChange(sec) { seconds = sec; // Need to update the higher scoped variable display.textContent = seconds; seconds -= 1; if (seconds > -1) { setTimeout(timeChange, 1000, seconds); } }

 <div id="page"> <div id="counter">5</div> <div id="btn"><button id="ticker">Start Pomodoro</button></div> </div>

addEventListener 对单击事件不起作用...

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-27 17:16:38

addEventListener 对单击事件不起作用...

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-27 17:16:38

解决方案1
0 已采纳 2019-02-27 17:16:38