基础计时器开发疑难：点击按钮无法获取input值，变量返回undefined

看起来你遇到的问题主要有几个关键点，我来一步步帮你排查和修复：

1. 为什么变量会返回undefined？ #

你提到console.log(h)输出undefined，最可能的原因是：

• 虽然你写了document.getElementById("hours").value，但如果元素获取失败（比如DOM加载异常、id拼写错误），document.getElementById("hours")会返回null，访问null.value就会得到undefined。
• 另外，你代码里的console.log(h.value)是错误的——因为h已经是input的value值（字符串或数字），不是DOM元素对象，所以h.value必然是undefined，这可能让你混淆了真正的问题。

修复步骤： #

先单独获取DOM元素，检查是否存在，再转换value为数字类型（input的value默认是字符串，直接做减法会出问题）：

// 先获取元素，确保存在
const hoursInput = document.getElementById('hours');
const minutesInput = document.getElementById('minutes');
const secondsInput = document.getElementById('seconds');

if (!hoursInput || !minutesInput || !secondsInput) {
  console.error('无法找到计时器输入元素，请检查ID是否正确');
  return;
}

// 转换为数字，避免字符串运算问题，默认值为0
let h = parseInt(hoursInput.value, 10) || 0;
let m = parseInt(minutesInput.value, 10) || 0;
let s = parseInt(secondsInput.value, 10) || 0;

2. 计时器逻辑的其他问题 #

即使获取到了正确的数值，你的代码还有两个影响功能的问题：

• 计时器显示只更新一次：你在点击按钮时只设置了一次screenTimer.innerHTML，timer函数里修改了h/m/s后没有更新显示，所以屏幕上的时间不会变化。
• 倒计时逻辑有漏洞：比如当s初始为0时，第一次执行s--会变成-1，不符合预期。

修复后的timer函数： #

function timer(){
    // 先处理秒的递减
    if (s > 0) {
        s--;
    } else {
        // 秒为0时，检查分钟
        if (m > 0) {
            m--;
            s = 59;
        } else {
            // 分钟也为0时，检查小时
            if (h > 0) {
                h--;
                m = 59;
                s = 59;
            } else {
                // 全部为0，停止计时器
                clearInterval(intervalId);
            }
        }
    }

    // 每次计时更新后，刷新屏幕显示，用padStart保证两位数格式
    screenTimer.innerHTML = `<div class="screen-timer"><h2>${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}</h2></div>`;
}

3. 完整修正后的JavaScript代码 #

let button = document.querySelector(".btn");
let title = document.querySelector(".title");
let screenTimer = document.querySelector(".screen-timer");

// quotes
let quotes = ["OM MANI PADME HUM", "OM", "BUENOS PENSAMIENTOS, BUENAS PALABRAS, BUENAS ACCIONES", "YO FLUYO COMO EL AGUA"];

// timer start button
button.addEventListener("click", function(){
    // 先获取输入元素，确保存在
    const hoursInput = document.getElementById('hours');
    const minutesInput = document.getElementById('minutes');
    const secondsInput = document.getElementById('seconds');

    if (!hoursInput || !minutesInput || !secondsInput) {
        console.error('无法找到计时器输入元素，请检查ID是否正确');
        return;
    }

    // 转换为数字，默认值0
    let h = parseInt(hoursInput.value, 10) || 0;
    let m = parseInt(minutesInput.value, 10) || 0;
    let s = parseInt(secondsInput.value, 10) || 0;

    // title changer
    let index = parseInt(Math.random() * quotes.length);
    title.innerHTML = `<div class="title"><h1>${quotes[index]}</h1></div>`;

    // 先初始化显示
    screenTimer.innerHTML = `<div class="screen-timer"><h2>${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}</h2></div>`;

    // interval for the timer
    let intervalId = setInterval(timer, 1000);

    // timer function
    function timer(){
        if (s > 0) {
            s--;
        } else {
            if (m > 0) {
                m--;
                s = 59;
            } else {
                if (h > 0) {
                    h--;
                    m = 59;
                    s = 59;
                } else {
                    clearInterval(intervalId);
                }
            }
        }

        // 更新显示
        screenTimer.innerHTML = `<div class="screen-timer"><h2>${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}</h2></div>`;
    }

    // 现在的console.log应该能输出正确的数值了
    console.log('小时:', h);
    console.log('分钟:', m);
    console.log('秒:', s);
});

额外说明 #

你提到用document.getElementById(id).onClick替代addEventListener，二者确实效果类似，但addEventListener更灵活——它可以给同一个元素绑定多个同类型事件，而onClick会覆盖之前的绑定，所以推荐继续使用addEventListener。

内容的提问来源于stack exchange，提问作者Tomas Pereira