Question

我想使用id="ticker"和addEventListener处理单击事件。 onclick有效。

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 个答案: