我的JavaScript随机选择器无法工作，请求技术排查与修复

问题分析 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'classList')错误，核心原因是：

• 当没有生成任何.tag元素时（比如空输入直接按回车），pickRandomTag会返回undefined，此时调用highlightTag尝试访问undefined的classList就会触发报错。
• 同时存在隐藏问题：JS中高亮类名写为hightlight（少一个字母l），但CSS定义的是.tag.highlight，导致即使选中标签，高亮样式也不会生效。

修复方案 #

1. 增加标签存在性校验 #

在执行随机逻辑前先检查是否有有效标签，避免传入undefined：

function randomSelect() {
  const tags = document.querySelectorAll('.tag');
  // 无标签时直接终止，避免后续报错
  if (tags.length === 0) return;
  
  const times = 30;
  const interval = setInterval(() => {
    const randomTag = pickRandomTag();
    if (!randomTag) return; // 双重保险
    
    highlightTag(randomTag);
    setTimeout(() => {
      unHighlightTag(randomTag);
    }, 100);
  }, 100);
  
  // 补充：原代码缺少定时器停止逻辑，完成30次后停止并保留最终高亮
  setTimeout(() => {
    clearInterval(interval);
    const finalTag = pickRandomTag();
    if (finalTag) highlightTag(finalTag);
  }, times * 100);
}

function pickRandomTag() {
  const tags = document.querySelectorAll('.tag');
  if (tags.length === 0) return null;
  return tags[Math.floor(Math.random() * tags.length)];
}

2. 修正类名拼写错误 #

将JS中的hightlight改为highlight，与CSS类名保持一致：

function highlightTag(tag) {
  tag.classList.add('highlight'); // 修正拼写
}

function unHighlightTag(tag) {
  tag.classList.remove('highlight'); // 修正拼写
}

完整修复后的JS代码 #

const tagsEl = document.getElementById('tags')
const textarea = document.getElementById('textarea')

textarea.focus()

textarea.addEventListener('keyup', (e) => {
  createTags(e.target.value)

  if (e.key === 'Enter') {
    setTimeout(() => {
      e.target.value = ''
    }, 10)

    randomSelect()
  }
})

function createTags(input) {
  const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim())

  tagsEl.innerHTML = ''

  tags.forEach(tag => {
    const tagEl = document.createElement('span')
    tagEl.classList.add('tag')
    tagEl.innerText = tag
    tagsEl.appendChild(tagEl)
  })
}

function randomSelect() {
  const tags = document.querySelectorAll('.tag');
  if (tags.length === 0) return;
  
  const times = 30;
  const interval = setInterval(() => {
    const randomTag = pickRandomTag();
    if (!randomTag) return;
    
    highlightTag(randomTag);
    setTimeout(() => {
      unHighlightTag(randomTag);
    }, 100);
  }, 100);
  
  setTimeout(() => {
    clearInterval(interval);
    const finalTag = pickRandomTag();
    if (finalTag) highlightTag(finalTag);
  }, times * 100);
}

function pickRandomTag() {
  const tags = document.querySelectorAll('.tag');
  if (tags.length === 0) return null;
  return tags[Math.floor(Math.random() * tags.length)];
}

function highlightTag(tag) {
  tag.classList.add('highlight');
}

function unHighlightTag(tag) {
  tag.classList.remove('highlight');
}

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