如何将同一个JS函数应用到多个带独立ID的div元素上

你之前的两种尝试失效原因非常明确：

• document.getElementById() 原生仅支持接收单个ID字符串作为参数，传入逗号分隔的多ID字符串时会直接返回null，后续逻辑自然全部失效
• 复制4份代码修改变量名的方案属于典型的冗余实现，非常容易出现变量作用域冲突、逻辑不一致的问题，维护成本极高，完全没有必要

不需要修改你现有div的独立ID，只需要把乱序逻辑封装为接收DOM元素作为入参的通用函数，遍历所有目标ID逐个执行即可：

// 通用诗句乱序函数，传入需要处理的DOM元素即可生效
function rndPoem(element) {
  const lines = element.innerHTML
    .split(/<br\s*\/?>/) // 兼容<br>、<br/>、<br />等多种换行标签写法
    .map(line => line.trim())
    .filter(Boolean); // 过滤拆分后产生的空字符串，避免打乱后出现多余空白行

  // Fisher-Yates 洗牌算法，保证乱序随机性
  for (let i = lines.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [lines[i], lines[j]] = [lines[j], lines[i]];
  }

  element.innerHTML = lines.join('<br>');
}

// 所有需要应用乱序效果的元素ID，后续增减元素直接修改这个数组即可
const targetElementIds = ['text1', 'text2', 'text3', 'text4'];
// 遍历ID列表，逐个获取元素执行乱序
targetElementIds.forEach(id => {
  const targetEl = document.getElementById(id);
  // 增加存在性判断，避免ID写错/元素不存在时抛出控制台错误
  if (targetEl) {
    rndPoem(targetEl);
  }
});

• 你当前CSS中定义的.text类样式没有生效，因为现有div仅设置了ID、未添加text类名，只需要给每个div加上class="text"即可正常应用宽度、内边距样式，该操作不会影响你保留独立ID的要求
• 原拆分逻辑仅匹配严格的<br>标签，实际渲染中如果浏览器自动把换行标签解析为自闭合格式会出现拆分失败，上述代码中的正则已经兼容了这类场景
• 新增的空值过滤逻辑会自动去掉原HTML中标签前后的换行、缩进产生的空内容，避免打乱后出现无意义的空白行

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