Uncaught ReferenceError错误排查：复用JS函数移动元素问题

阿华AIGC实验室

2026-5-29

解决你的ReferenceError和函数复用问题

首先，你遇到的Uncaught ReferenceError: doIt is not defined错误，根源是你的JavaScript代码里有一个语法错误：在for循环里，你把分号写成了冒号——for (var i = 1; i <= 6: i++)这里的:应该改成;，这个小失误导致浏览器无法正确解析你的函数，自然就找不到doIt了。

接下来，你的函数逻辑可以大幅优化，完全不需要循环1到6来匹配panel——毕竟你已经通过onclick="doIt(this.id)"把当前点击的panel的ID传进来了，直接从这个ID里提取数字就能定位到对应的元素，这样一个函数就能处理所有6个条目，不用重复写冗余逻辑。

修正后的JavaScript代码

function doIt(panelId) {
  // 从panelId里提取数字，比如"panel1"提取出"1"
  const num = panelId.replace('panel', '');
  const moveEl = document.getElementById(`move${num}`);
  const targetPanel = document.getElementById(panelId);
  const targetDiv = document.getElementById(`div${num}`);

  // 判断当前move元素的父元素是panel还是div
  if (moveEl.parentElement === targetPanel) {
    // 移到div的最前面
    targetDiv.insertBefore(moveEl, targetDiv.firstChild);
    // 去掉开头的"-"
    moveEl.textContent = moveEl.textContent.substring(1);
  } else {
    // 移回panel
    targetPanel.appendChild(moveEl);
    // 开头加上"-"
    moveEl.textContent = '-' + moveEl.textContent;
  }
}

优化点说明

去掉冗余循环：直接通过传入的panel ID提取数字，精准定位对应元素，代码更高效、易维护。
替换innerHTML为textContent：如果只是操作纯文本内容，textContent比innerHTML更安全，也不会触发不必要的HTML解析。
简化位置判断：直接用parentElement对比父元素，避免了通过getAttribute获取ID再比较的繁琐步骤。