未捕获的类型错误：无法读取未定义的属性（读取“焦点”）

Question

界面截图

当我输入6位数的验证码时，它显示

未捕获的类型错误：无法读取未定义的属性（读取“焦点”）

验证码不是来自服务器。 这只是前端 UI 的普通 JavaScript 代码

let codes = document.querySelectorAll('.code')

codes[0].focus()

codes.forEach(function (code, idx) {
    code.addEventListener('keydown', function (e) {
        if (e.key >= 0 && e.key <= 9) {
            codes[idx].value = ''
            setTimeout(() => codes[idx + 1].focus(), 10)
        } else if (e.key === 'Backspace') {
            setTimeout(() => codes[idx - 1].focus(), 10)
        }
    })
})

我应该在 javaScript 中使用什么才能解决错误

Answer 1

这意味着codes[idx + 1]或codes[idx - 1]是一个不存在并返回undefined的索引。 您可以在调用focus方法之前添加检查。

setTimeout(() => {
  if (typeof codes[idx + 1] !== 'undefined') {
    codes[idx + 1].focus()
  }
}, 10)

或者您可以使用可选的链接运算符?. 缩短它。

setTimeout(() => codes[idx + 1]?.focus(), 10)