如何让console.log()正确打印range类型input输入框选中的数值？

问题根因 #

代码存在变量重复定义和取值逻辑错误：点击事件回调内通过let input声明的变量存储的是#myRange元素的value值（字符串类型），并非DOM元素对象，因此不存在.value属性，访问input.value自然返回undefined。

另外建议将监听事件从click替换为input，input事件会在滑块数值发生变化时实时触发，可覆盖拖拽滑块、键盘调整数值等非点击操作的数值变更场景，更适配range输入框的交互逻辑。

修复后可用代码 #

const myRange = document.getElementById('myRange')
myRange.addEventListener('input', () => {
    // 直接读取DOM元素的value即可，无需二次取值
    const currentVal = myRange.value
    console.log(currentVal)
    if (currentVal === '1') {
        theme1()
    } else if (currentVal === '2') {
        theme2()
    }
})

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