为什么我不能从函数更改这个全局变量?(JavaScript)



简单的倒计时项目。

期望结果:

  1. 全局变量确定默认时间
  2. 则滑块值覆盖该变量

问题:滑块值局部更改,但全局值保持不变

我看了一整天关于可变范围的教程,仍然看不出哪里出了问题,因为:

  • 全局用";var";外部函数:var initialMinutes = 5
  • 尝试更新函数内部的值如下所示:
const change = slider.addEventListener('change', setMins)
function setMins() {
initialMinutes = slider.value
}

我也在这里和那里尝试过window.variable,但都没有成功。我希望有人能帮忙。这变得越来越难以处理。

const countdown = document.getElementById('countdown')
const slider = document.getElementById('slider')
const startBtn = document.getElementById('btn-startStop')
const resetBtn = document.getElementById('btn-reset')

// Event Listeners
const change = slider.addEventListener('change', setMins)
const start = startBtn.addEventListener('click', startStop)
const reset = resetBtn.addEventListener('click', resetApp)
// Time
var initialMinutes = 15
countdown.innerHTML = initialMinutes+':00'
const initialDuration = initialMinutes * 60
let time = initialMinutes * 60
let interval = null
let status = 'stopped'
function updateCountdown() {
const minutes = Math.floor(time / 60)
let seconds = time % 60
seconds = seconds < 10 ? '0'+ seconds : seconds
if( time < 1) {
clearInterval(interval)
startBtn.innerHTML = 'START'
status = 'stopped'
countdown.innerHTML = `00:00`
} else {
countdown.innerHTML = `${minutes}:${seconds}`
time--;
}
}
function startStop() {
if(status === 'stopped') {   
interval = setInterval(updateCountdown, 50)
startBtn.innerHTML = 'STOP'
status = 'running'
} else {
clearInterval(interval)
startBtn.innerHTML = 'START'
status = 'stopped'
}
}
function setMins() {
initialMinutes = slider.value
countdown.innerHTML = slider.value+':00'
}
function resetApp() {
clearInterval(interval);
document.getElementById('countdown').innerHTML = '00:00'
startBtn.innerHTML = 'START'
status = 'stopped'
}

为清晰起见,包含Codepen链接:https://codepen.io/donseverino/pen/YzWBJYV

明白了!这不是范围的问题,而是变量分配的问题。updateCountdown()使用timetime = initialMinutes * 60

我原以为更改initialMinutes会自动更改time中的值,但事实并非如此。

在函数内部重新分配time解决了这个问题。

function setMins() {   
initialMinutes = slider.value
time = initialMinutes * 60
}

相关内容

  • 没有找到相关文章

最新更新