Question

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

2022-07-13

5422

javascript focus typeerror undefined

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

Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

验证码不是来自服务器。它只是前端 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)