如何用JavaScript实现多组随机姓名插入指定div并正常运行？

核心问题是重复定义了相同名称的变量或函数：JavaScript全局作用域下的同名变量/函数会被后面的定义覆盖，导致第一个脚本的逻辑被替换，最终只有第二个生效。

方案1：封装通用函数（推荐） #

把重复逻辑封装成可复用的函数，通过传入不同的数据源和目标类名实现功能，既减少重复代码，也彻底避免命名冲突：

// 通用随机文本插入函数
function insertRandomText(sourceArray, targetClassName) {
  // 生成随机索引
  const randomIndex = Math.floor(Math.random() * sourceArray.length);
  // 获取目标DOM元素
  const targetElement = document.querySelector(`.${targetClassName}`);
  // 确保元素存在再执行赋值
  if (targetElement) {
    targetElement.textContent = sourceArray[randomIndex];
  }
}

// 定义各类数据源
const firstNameList = ["明", "华", "伟", "芳", "丽"];
const lastNameList = ["赵", "钱", "孙", "李", "周"];
const middleNameList = ["子", "梓", "浩", "雨", "语"]; // 后续中间名数组

// 分别调用生成对应内容
insertRandomText(firstNameList, "text");
insertRandomText(lastNameList, "text2");
insertRandomText(middleNameList, "text3"); // 后续添加中间名的调用

方案2：避免命名冲突（独立编写） #

如果不想封装通用函数，只需确保每个脚本的变量、函数名称完全唯一，就能避免覆盖问题：

// 名字生成逻辑
const firstNameArray = ["明", "华", "伟", "芳", "丽"];
function generateFirstName() {
  const randomIdx = Math.floor(Math.random() * firstNameArray.length);
  const textElement = document.querySelector(".text");
  if (textElement) textElement.textContent = firstNameArray[randomIdx];
}
generateFirstName();

// 姓氏生成逻辑
const lastNameArray = ["赵", "钱", "孙", "李", "周"];
function generateLastName() {
  const randomIdx = Math.floor(Math.random() * lastNameArray.length);
  const text2Element = document.querySelector(".text2");
  if (text2Element) text2Element.textContent = lastNameArray[randomIdx];
}
generateLastName();

// 后续中间名生成逻辑
const middleNameArray = ["子", "梓", "浩", "雨", "语"];
function generateMiddleName() {
  const randomIdx = Math.floor(Math.random() * middleNameArray.length);
  const text3Element = document.querySelector(".text3");
  if (text3Element) text3Element.textContent = middleNameArray[randomIdx];
}
generateMiddleName();

额外注意事项 #

• 每次操作DOM元素前，先判断元素是否存在（if (targetElement)），避免因元素不存在抛出错误，影响其他脚本执行。
• 如果后续逻辑更复杂，可使用IIFE（立即执行函数表达式）隔离每个脚本的作用域，进一步避免全局变量污染：

// 名字生成脚本隔离作用域
(function() {
  const names = ["明", "华", "伟", "芳", "丽"];
  const randomIndex = Math.floor(Math.random() * names.length);
  const el = document.querySelector(".text");
  if (el) el.textContent = names[randomIndex];
})();

// 姓氏生成脚本隔离作用域
(function() {
  const lastNames = ["赵", "钱", "孙", "李", "周"];
  const randomIndex = Math.floor(Math.random() * lastNames.length);
  const el = document.querySelector(".text2");
  if (el) el.textContent = lastNames[randomIndex];
})();

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