addEventListener 工作不正常

Question

addSessionTimeBtn 应该增加屏幕上显示的时间值。当我使用不带参数的函数作为事件处理程序时效果很好，但是当使用 changeTime 函数时，值增加 1，然后事件侦听器开始忽略单击。我做错了什么？

addSessionTimeBtn.addEventListener('click', function () {
    changeTime(sessionMinutes, sessionSeconds, '+', 'Session')
})

reduceSessionTimeBtn.addEventListener('click', function () {
    changeTime(sessionMinutes, sessionSeconds, '-', 'Session')
})

function changeTime(minutes, seconds, operation, period) {
    if (period === 'Session') {
        timerName.innerHTML = 'Session time';
    } else {
        timerName.innerHTML = 'Break time';
    }
    if (operation === '+') {
        seconds += 1;
        if (seconds > 59) {
            seconds = 0;
            minutes += 1;
        }
    } else {
        seconds -= 1;
        if (minutes > 0 && seconds < 0) {
            minutes -= 1;
            seconds = 59;
        } else if (minutes === 0 && seconds < 1) {
            seconds = 0;
        }
    }
    timer.innerHTML = `${timeLength(minutes)}:${timeLength(seconds)}`
}

Answer 1

你将整数作为参数传递给你的函数，因为它们是原始值，所以它们是按值传递的，你似乎指向的原始变量没有发生变化（你不能在 js 中有指向整数的指针)，并且您的计时器始终重置为零。

您可以将 sessionMinutes 和 sessionSeconds 存储在一个对象中并传递该对象，该对象作为引用传递，它将发生变化。

const timer = document.getElementById("timer");
const timerName = document.getElementById("timername");

const session = {
  minutes: 0,
  seconds: 0
}

function changeTime(session, operation, period) {
  if (period === 'Session') {
    timerName.innerHTML = 'Session time';
  } else {
    timerName.innerHTML = 'Break time';
  }
  if (operation === '+') {
    session.seconds += 1;
    if (session.seconds > 59) {
      session.seconds = 0;
      session.minutes += 1;
    }
  } else {
    session.seconds -= 1;
    if (session.minutes > 0 && session.seconds < 0) {
      session.minutes -= 1;
      session.seconds = 59;
    } else if (session.minutes === 0 && session.seconds < 1) {
      session.seconds = 0;
    }
  }
  timer.innerHTML = `${session.minutes}:${session.seconds}`; // I don't know what timeLength does so I removed it just to illustrate, it doesn't change the point.
}

document.getElementById("plus").addEventListener('click', function() {
  changeTime(session, '+', 'Session')
});

document.getElementById("minus").addEventListener('click', function() {
  changeTime(session, '-', 'Session')
});

<button id="plus">
+
</button>

<button id="minus">
-
</button>

<p id="timername">
Session
</p>
<p id="timer">
0:0
</p>

addEventListener 工作不正常

addEventListener works incorrectly

javascript

event-listener

addeventlistener

dom-events