JS新手使用模板字面量选择DOM元素时遇未定义错误求助

错误原因 #

你写的console.log(currentPriorityB+${num})里，currentPriorityB是未定义的变量，JS找不到它所以报错。而且这种直接拼接变量名的方式不符合JS语法，不能这么动态调用已定义的变量。另外你的HTML里类名有格式错误（比如currentPriorityB1、currentPriorityB3），要先修正为正确的类名（currentPriorityB1、currentPriorityB2、currentPriorityB3`），否则元素查询会失败。

解决方案一：用对象存储元素，动态访问 #

如果你已经提前获取了所有元素，可以把它们放到一个对象里，通过键名动态获取：

// 先修正HTML类名后，获取元素
const elements = {
  currentPriorityB1: document.querySelector('.currentPriorityB1'),
  currentPriorityB2: document.querySelector('.currentPriorityB2'),
  currentPriorityB3: document.querySelector('.currentPriorityB3')
}

let num = 1
console.log(elements[`currentPriorityB${num}`])

解决方案二：动态拼接选择器，直接查询 #

更简洁的方式是不用提前定义所有变量，直接用模板字面量拼接选择器字符串，实时查询对应元素：

let num = 1
const targetElement = document.querySelector(`.currentPriorityB${num}`)
console.log(targetElement)

这样就能根据num的值动态获取对应的div元素了。

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